Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

Question

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

I have encountered a challenge that I need help with. On a webpage, there are multiple images of varying sizes. I am looking to create a feature where hovering over an image triggers the appearance of a div above it containing a button and text without disrupting the layout. The button should be positioned above the text. Below is the code snippet I currently have on my page along with a link to a JSFiddle for reference:

Here is the JSFiddle.

<html lang="en">
    ...
</html>

.blurry-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

...

.profileImage{
    border: 5px solid white;
}

I would like to achieve an effect similar to effect 13 on this webpage when hovering over the profile image:

Currently, creating the overlay div above the image causes unintended layout changes. Here are two screenshots showcasing the issue: https://i.sstatic.net/9pJkv.png https://i.sstatic.net/FOcCE.jpg

PS: Image Credit by Gerd Altmann from Pixabay

html css bootstrap-4

Answer 1

Answer №1

Allow me to address your query by making modifications to the current code snippet. Please refer to the updated code below:

.blurry-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

.masthead{
    height: 100%;
    width: 100%;
    min-height: 500px;
    background: linear-gradient(to bottom,rgba(140, 140, 140, 0.31) 0,rgba(0, 0, 0, 0.8) 100%);
}

.fullPageImage{
    background: url(https://img.wallpapersafari.com/tablet/2560/1700/56/31/wC2k5O.jpg);
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.row{
    margin:0 !important;
}

.flex-column {
    max-width: 260px;
}

img {
    margin: 5px;
}

.scale {
    transform: scaleY(1.05);
    padding-top: 5px;
}

body,html {
    height: 100%;
}

.v-center {
    position: relative;
    transform: translatey(-50%);
    top: 50%;
}

.navbar-default{
    transition:100ms ease;
    background: #0000003b;
}
.navbar-default.scrolled{
    background:#000;
}

.label:after {
    content: '\A';
    white-space: pre;
}

.hideme{
    opacity:0;
}

@media (min-width: 992px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform:translateY(0rem);
        opacity: 1;
    }
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }
    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}


.profileImage{
    border: 5px solid white;
}

#profilePicture{
display:inline-block;
background-image: url('https://img.wallpapersafari.com/tablet/2560/1700/56/31/wC2k5O.jpg');
background-size:cover;
background-repeat:no-repeat;
border: 5px solid white;
width: 12em;
height: 9em;
cursor: pointer;
}

.hoverLayout{
visibility:hidden;
position:relative;
height:100%;
width:100%;
}

#profilePicture:hover > .hoverLayout{
  visibility:visible;
  animation: slideIn ease-in-out .75s forwards;
}

.hoverLayout:hover{
  visibility:visible;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Discover Your PT</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body id="page-top">
    <nav class="navbar navbar-default navbar-expand-sm navbar-dark fixed-top">
        <div class="container">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="navbar-brand" href="../../index.html">Discover Your PT</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto" id="ulNavBar">
                <li class="nav-item">
                    <a class="nav-link text-danger" href="../../php/view/loginSignup.html">Login</a>
                </li>
            </ul>
        </div>
    </nav>


    <header class="masthead">
        <section class="h-100 fullPageImage">
            <div class="row h-100 text-white font-weight-bold text-center">
                <div class="col-lg-12 h-50 my-auto">
                    <div class="profilePicture" alt="Profile Image" id="profilePicture">
                    <div class="hoverLayout">
                    <h1 class="text-uppercase border-bottom">
                        <span id="cognomeNome">Title</span>
                    </h1>
                    <h5>
                        <span id="descrizione">Description</span>
                    </h5>
                </div>
                </div>
                </div>
                <input type="file" name="upload1" id="uploadImageProfile" class="upload" multiple="multiple" />
                Maximum image size: 7mb

            </div>
        </section>
    </header>
</body>

</html>

Answer 2

Allow me to address your query by making modifications to the current code snippet. Please refer to the updated code below:

.blurry-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

.masthead{
    height: 100%;
    width: 100%;
    min-height: 500px;
    background: linear-gradient(to bottom,rgba(140, 140, 140, 0.31) 0,rgba(0, 0, 0, 0.8) 100%);
}

.fullPageImage{
    background: url(https://img.wallpapersafari.com/tablet/2560/1700/56/31/wC2k5O.jpg);
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.row{
    margin:0 !important;
}

.flex-column {
    max-width: 260px;
}

img {
    margin: 5px;
}

.scale {
    transform: scaleY(1.05);
    padding-top: 5px;
}

body,html {
    height: 100%;
}

.v-center {
    position: relative;
    transform: translatey(-50%);
    top: 50%;
}

.navbar-default{
    transition:100ms ease;
    background: #0000003b;
}
.navbar-default.scrolled{
    background:#000;
}

.label:after {
    content: '\A';
    white-space: pre;
}

.hideme{
    opacity:0;
}

@media (min-width: 992px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform:translateY(0rem);
        opacity: 1;
    }
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }
    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}


.profileImage{
    border: 5px solid white;
}

#profilePicture{
display:inline-block;
background-image: url('https://img.wallpapersafari.com/tablet/2560/1700/56/31/wC2k5O.jpg');
background-size:cover;
background-repeat:no-repeat;
border: 5px solid white;
width: 12em;
height: 9em;
cursor: pointer;
}

.hoverLayout{
visibility:hidden;
position:relative;
height:100%;
width:100%;
}

#profilePicture:hover > .hoverLayout{
  visibility:visible;
  animation: slideIn ease-in-out .75s forwards;
}

.hoverLayout:hover{
  visibility:visible;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Discover Your PT</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body id="page-top">
    <nav class="navbar navbar-default navbar-expand-sm navbar-dark fixed-top">
        <div class="container">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="navbar-brand" href="../../index.html">Discover Your PT</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto" id="ulNavBar">
                <li class="nav-item">
                    <a class="nav-link text-danger" href="../../php/view/loginSignup.html">Login</a>
                </li>
            </ul>
        </div>
    </nav>


    <header class="masthead">
        <section class="h-100 fullPageImage">
            <div class="row h-100 text-white font-weight-bold text-center">
                <div class="col-lg-12 h-50 my-auto">
                    <div class="profilePicture" alt="Profile Image" id="profilePicture">
                    <div class="hoverLayout">
                    <h1 class="text-uppercase border-bottom">
                        <span id="cognomeNome">Title</span>
                    </h1>
                    <h5>
                        <span id="descrizione">Description</span>
                    </h5>
                </div>
                </div>
                </div>
                <input type="file" name="upload1" id="uploadImageProfile" class="upload" multiple="multiple" />
                Maximum image size: 7mb

            </div>
        </section>
    </header>
</body>

</html>

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

Answer №1

Similar questions

Using jquery to create HTML elements but unable to remove them using jquery

What causes the website to malfunction when I refresh the page?

Tips for effectively utilizing the Material-UI Grid component to implement this layout

Enhancing the appearance of a hyperlink heading

Some elements are not responding to margin-top properly

The HTML table fails to refresh after an Ajax request has been made

What is the best way to show and hide the information in a FAQ section when each one is clicked?

Enclose an image with a <div> element while maintaining the <div> height at

I incorporated a YouTube video using the iframe tag, but encountered an issue where the page would not scroll up or down when the mouse cursor was positioned on the iframe

Create a unique design using two vertical sections with Bootstrap 5

Steps to creating an elliptical border using CSS

Implementing the `columnChooser` functionality in Jqgrid with compatibility for Bootstrap 4

Save your canvas image as a file and attempt to force a download, only to be met with a failure to

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

The screen reader is unable to interpret the text that is visible within the anchor tag

Arranging a pair of buttons from separate forms to be perfectly aligned on the same line

JavaScript is throwing an error when clicking on functions and managing the z-index property

Bootstrap grid not maintaining consistent column widths

Display the information stored in an array onto the console using console.log in Angular with Typescript

Steps for removing all inline styles within an element:1. Access the element's