Jump to content

Two Questions regarding Image Hover Overlay Fade


ughhope

Recommended Posts

Hey! I'm new at coding and just have two questions regarding an image hover overlay fade code. 

Here's a link for what I'm referencing: https://www.w3schools.com/css/css3_images.asp

This is what I'm working with: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

Would love to insert my own picture instead of the default avatar they give but I'm confused on how to do so. Is anyone able to help guide me through that? 

Second question: If I wanted a user to click on this image to go to another link, how would I code that? I'm having trouble understanding how to insert that clickable feature. 

Thank you if you can help! I appreciate it. 

Link to comment
Share on other sites

In the HTML code, there are references to the words that are shown, and the image that is shown.

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Replace img_avatar.png with the file name of your own picture on your site to include yours, and change "Hello World" to whatever you would like written when you hover over it.

To make this a link, you should be able to apply an <a> tag around the container with the link you want it to travel to. If you instead want a button inside your text area, you can put your <a> tag in there.

Link to comment
Share on other sites

  • 1 month later...

Hi @ughhope,
I have tried to code as per your requirement. I think you should try this once.
 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .container {
            position: relative;
            width: 50%;
        }

        .image {
            display: block;
            width: 100%;
            height: auto;
        }

        .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: #008CBA;
        }

        .container:hover .overlay {
            opacity: 1;
        }

        .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Fade in Overlay</h2>
    <p>Hover over the image to see the effect.</p>
    <div class="container">
        <img src="https://www.roadtestreviews.com/wp-content/uploads/2014/11/mustang-batcave-017.jpg" alt="Avatar"
            class="image">
        <a href="https://www.google.com/" class="overlay"></a>
    </div>
</body>
</html>

I hope it will work as per your requirements.  I have also added an anchor tag for your second query.

Edited by ishan_shah
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...