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:

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

Customizing CSS in Angular Components: Taking Control of Style Overrides

Teaching jQuery selectors to detect recently-added HTML elements

Checkbox ensemble computes total score

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

Adding multiple elements with varying content to a separate division

Tips for concealing overflowing CSS content

"Upload a text file and create a JavaScript variable that contains the text within it

JSX Bootstrap unresolved arror

What could be causing the CSS transition to fail when the menu button is clicked?

Adjusting div to not be absolutely positioned

Struggling to create horizontal buttons for my design

Harnessing the power of flexbox for data visualization

Updated INNER header and footer - unrelated to the answered questions

Using Node.js to retrieve table data from a URL

Arrange a variety of images with different dimensions in a narrow row while keeping the width fixed and adjusting the height accordingly

Bring in the content to Notepad utilizing jQuery

Fixed position of the element within a parent stacking context

Issue with Jquery .scroll method not triggering display:none functionality

Hide all elements in jQuery that do not have a class assigned

Is it possible to modify the variables in a SCSS file within an Angular 2 project?