Designing an interactive backdrop that draws users in with just a

I'm currently working on putting together a website, and to assist me with this task, I looked at this html code and this css code. The code includes a grid of 12 images with logos and animations. However, the images are not linkable, and I would like to make them clickable. I have attempted to modify the code to achieve this, but I seem to be encountering some strange outcomes. Could someone please provide assistance?

        <div class="portfolio-items-wrapper">
            <div class="portfolio-item-wrapper">
                <div class="portfolio-img-background" style="background-image:url(Immagini/Crypto.jpg)">  
                    <a href="cryptopage.html"><img src="Immagini/Crypto.jpg"></a>
                </div>
                <div class="img-text-wrapper">
                    <div class="logo-wrapper">
                        <img src="Immagini/Logo/Bitcoin.png">
                    </div>
                </div>
            </div>
        </div>
htmlcssimage

Answer №1

To ensure the images can be used as links, it would be best not to set them as background images. Consider using this method instead:

<div class="portfolio-img">  
     <a href="cryptopage.html"><img src="Immagini/Crypto.jpg"></a>
 </div>

Make sure to add this CSS styling for the image container:

.portfolio-img {
  height: 350px;
  width: 100%;
}

Answer №2

Take a look at this recommended solution

.click-img {
    position: relative;
    display: block;
}
<a class="click-img" href="#" title="Clickable background image">
    <img src="https://picsum.photos/seed/picsum/300/300" alt="Your Image">
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting and downloading images to base64 format often leads to data corruption

When attempting to download an image and convert it to a base64-encoded string using the Buffer interface as shown in the example below: 'use strict'; const got = require('got'); const imgUrl = 'https://www.google.de/images/brand ...

node.jsimagedownloadbase64encode

What is the best way to eliminate the space between columns?

I have a simple structure on BootStrap. <div class="container"> <div class="row"> <div class="col-md-4 blue-section" ><p>Some content</p></div> <div class="col-md-4 red-section"><p>Some content&l ...

csstwitter-bootstrap

What is the best way to incorporate dynamic HTML content into the designated section?

I have the concept of including a text box in each dynamically created div. HTML <!DOCTYPE html> <html> <head> <title>trial </title> <meta charset="utf-8"> <meta name="viewport" cont ...

javascripthtmljquerybutton

What is the best way to eliminate the blue color from a Boostrap 5.3 accordion item when it is opened?

As shown in these two images, I am looking to remove the blue color and blue border when opened: https://i.sstatic.net/vOIna.png https://i.sstatic.net/7eLfK.png <div class="accordion-item"> ...

htmlcssbootstrap-5

Image overlay on a hovering background

I'm currently facing a challenge with creating a hover effect for a background image while keeping the image in front unchanged. I would like the background to darken on hover, but I want the image in front of it to remain the same. Essentially, I ne ...

htmlcssimagebackgroundhover

Exporting image to excel using HTML code

I am working on a unique project where I have successfully converted an image through canvas object and placed it within a div tag, which is nested in a table tag. My goal now is to export this table to Excel using ColdFusion. Below is the code snippet tha ...

htmlcoldfusion

Developing a personalized Avada form auto-scrolling algorithm

Our form, created using the Wordpress - Avada theme, needs an autoscroll feature. As users answer questions, the next question appears below, but this is not immediately visible on mobile devices. To address this, we require autoscroll functionality. The ...

javascripthtmljqueryformsautoscroll

The Pin property in GSAP is behaving unexpectedly when used in NextJS

I recently tried to learn gsap and wanted to create a smooth animation where I could scroll down a page and have a long word scroll horizontally and get pinned while scrolling using the scrollTrigger plugin of gsap. I followed a tutorial but ran into an is ...

htmlnext.jsgsapscrolltrigger

CSS unable to alter image on DIV hover due to technical issue

I have a DIV that changes its color when hovered over I am looking to change the image inside the div when hovering over the entire div, not necessarily just on the image itself. Here is the HTML: <div class="about"> <img class="about-project1" ...

htmlcss

I am puzzled as to why there is extra space on the right side of the output. Is there a way to utilize Bootstrap 4 to fill in

What could be causing the space at the end of the output? And how can I utilize Bootstrap 4 to fill that space? .navbar-custom { background-color:rgb(128 128 128 / 18%); height:48px; } .close{ margin-bottom: 40px; } h2{ margin-to ...

htmlcssbootstrap-4containersnavbar

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your

Currently, I am facing a challenge in animating an emoticon that was initially sketched on canvas. While following a tutorial to implement draw and clear animations using frames, I haven't been able to achieve the desired outcome. With 6 frames of the ...

javascriptjqueryhtmlanimationcanvas

Ways to resolve the vertical alignment issue between the title and content within an adjustable div box

Clicking the 'add image' button on the left adds a div with 2 draggable and resizable <p> elements into a container. The first <p> is the Title (Titre) and the second <p> contains the content of the div. Below is the code : ...

javascriptjqueryhtmlcss

Jquery div mysteriously disappearing without explanation

I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...

jquerycssjquery-selectors

The appearance of the Bootstrap button is not displaying correctly

My current button looks like this: https://i.sstatic.net/PyP8v.png As seen in the image above, there is something strange at the back of the button. How can I resolve this issue? I am working on a small project using Django and Bootstrap. Thank you in a ...

htmltwitter-bootstrapdjango-templates

Hiding the Previous or Next Button on the First and Last Item in a Twitter Bootstrap Carousel

Is there a way to hide the previous button on the first item and hide the right button when the carousel reaches the last item? I've tried different solutions but couldn't get it to work. Any help in understanding how to implement this for a Boot ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

How can I locate a div element using multiple class names?

<div class="value test" /> I am trying to locate this specific element on the web page which has two classes assigned to it. Since className does not accept space-separated values, I am exploring alternative ways to achieve this. Any suggestions? ...

javacssseleniumselenium-webdriver

Prevent the function from being repeatedly triggered as the user continues to scroll

I am facing an issue with my app where new content is fetched from the API using the infinity scroll method when the user reaches near the bottom of the screen. However, if the user scrolls too fast or continuously scrolls to the bottom while new content i ...

javascripthtmlreactjsreduxreact-redux

Adjust the text color based on the background image or color

Here on this site, I have designed the first div to display a dark image, while the second one shows a light background. I am aiming to adjust the sidebar text color based on whether it is displayed against the dark or light background. How can I achieve ...

javascriptjqueryhtmlcss

Executing PHP code discreetly

Alright, I currently have a php script located at for creating a new user. What I typically do is send the user data via POST to add it to the MySQL database and then send an email to the user for account verification. However, due to the slow SMTP serv ...

phphtmljson

Utilizing Stylus: Embracing Interpolation within a Mixin

I am encountering an issue while attempting to interpolate values passed into a mixin. positionModifier( key, x, y) &.{key} background-position: {x}px {y}px; An error is being thrown, which is shown below: 351| positionModifie ...

cssstylus