Jump to content
Sign in to follow this  
ughhope

Two Questions regarding Image Hover Overlay Fade

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. 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...