Creating an overlay effect when hovering over an image

Recently, I've been working on a gallery of photos that showcases different individuals. My goal is to have information about each person displayed when their respective photo is hovered over - including their name and role.

.gallery {
  position: relative;
  padding: 6px 6px;
  float: left;
  width: 24.99999%;
}

.flag {
  border: 1px solid #ccc;
  padding: 5px;
}

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

.biodata {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  color: white;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
<div class="gallery">
  <div class="flag">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <div class="biodata"> HIS NAME<br/> HIS JOB </div>
  </div>
</div>

I initially utilized an overlay approach to make the information visible, but unfortunately, the text does not appear in the correct order nor does it align with the image as desired. My aim is to have it centered at the bottom of the photo. Do you have any suggestions to achieve this? Thank you in advance.

htmlcssoverlay

Answer №1

Here is an updated code snippet for a gallery:

.gallery {
      position: relative;
      padding: 6px 6px;
      float: left;
      width: 24.99999%;
    }

    .flag {
      border: 1px solid #ccc;
      padding: 5px;
      position:relative;
    }

    .flag img {
      display: block;
      width: 100%;
      height: auto;

    }

    .biodata {
      position: absolute;
      bottom: 5px;
      left: 5px;
      right: 0;

      overflow: hidden;
      color: white;
      width: calc(100% - 10px) ;
      height: 0;
      transition: .5s ease;
      display:block;
      background:rgba(0,0,0,0.5);

    }
    .flag:hover .biodata{
      height:calc(100% - 10px);
    }
<div class="gallery">
      <div class="flag">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
        <div class="biodata"> HIS NAME<br/> President of INASGOC </div>
      </div>
    </div>

Answer №2

Check out this JSFiddle

CSS Styling Example

.biodata {
      z-index:100;
    }
.flag:hover .biodata {
      height:100%
    }

Answer №3

Try out this HTML code snippet:

 <!DOCTYPE html>
<html>
  <head>
    <style>
    .container {
      position: relative;
      width: 50%;
    }
    .image {
      display: block;
      width: 100%;
      height: auto;
    }
    .overlay {
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      background-color: #008CBA;
      overflow: hidden;
      width: 100%;
      height:0;
      transition: .5s ease;

    }
    .container:hover .overlay {
      bottom: 0;
      height: 100%;

    }

    .text {

      white-space: nowrap; 
      color: white;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);

    }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image">
      <div class="overlay">
        <div class="text">
          <p style="padding:20px;">Welcome to my page</p>
        </div>
      </div>
    </div>
  </body>
</html>

​

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

Enlarge the image to fill the entire screen

Currently, I am working on a webpage where I am displaying data fetched from a database using Laravel framework. The code snippet is shown below: Here is how the webpage looks like - image1 What I aim to achieve is to make the div go fullscreen upon clic ...

phphtmlcsslaravel

problem with the height of the side navigation bar

Currently, I am in the process of creating a back-end system that includes a side navigation bar positioned on the left-hand side. To accomplish this, I have opted to utilize the Bulma CSS framework and integrate it with Laravel. Although I have implemen ...

htmlcss

A unique technique for creating a stunning visual effect with images using

Can anyone help me with this issue: Check out this animated GIF The images in my project are overlapping when scrolling! How can I achieve a similar effect for my images? Is there a tutorial or plugin available for this? Here is the current code sn ...

javascripthtmlcss

Troubleshooting: ngAnimate max-height failing to apply to specific element

Having integrated ngAnimate into a project to enhance animations, I've encountered some unusual behavior with a specific element. Let me provide some context: our website features a shop with categories and products within those categories. I am usin ...

javascripthtmlcssangularjs

Tips for preventing the line through effect on a span element when it is checked

I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>&#215;</span></li> <li>Medicine <span>& ...

htmlcssresponsive-design

What is the reasoning behind next.js requiring the use of modular CSS instead of a global stylesheet linked to each page?

I am currently attempting to include a minified link stylesheet created with sass:watch into a particular page of a next.js (13) project. However, upon adding it using the head component, I received this warning: Do not add stylesheets using next/head I ...

cssnext.js

I noticed an excess of white space on the right side of my Angular website

Check out my website here. Everything seems to be functioning correctly, however, there is an issue with scrolling on mobile. It should only scroll up and down, not left and right! I have noticed a strange white space on the right side of my site when view ...

htmlcssangularresponsive

Updating the background image with Jquery is resulting in a distracting flicker effect

Here is a snippet of the script I'm using to create a slider that changes the background image for each image object in a specified time cycle. #Sliderimg - height set to 500px, $("#Sliderimg").css({ "background-image": "url(../Images/" + SliderIma ...

javascriptjquerycss

Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks: <h1>HELLO<h1> Within the boilerplat ...

cssexpressejs

Creating a background image with linear gradients in Rails 5

Does anyone know how to implement a background image with linear gradients in CSS? Here is the code snippet I have: .main-bg-back-1{ background:linear-gradient(180deg,#22263f,rgba(33,41,94,.96)),url(../img/app/download-bg.jpg) no-repeat; backgroun ...

htmlcssruby-on-rails

Could someone provide an example to illustrate the concept of "em is relative to the font size and % is relative to the parent element"?

Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works? What exactly do "relative to the font size" and "relative to the parent element" mean? ...

htmlcsstypography

Ways to showcase database content in ejs or html by utilizing Node.js, MongoDB, and Mongoose

I have successfully set up a Nodejs/Mongo/Mongoose database that can fetch and display data onto a page. However, I am encountering difficulty in displaying the fetched items in HTML, specifically in a table format. Below is the code for creating entries ...

htmlnode.jsmongodbmongooseejs

Creating consistent image sizes in Bootstrap

I'm currently using Bootstrap 4 to showcase multiple images on my website. I have attempted to apply the Grid system as per Bootstrap's guidelines, but the display of the images is not aesthetically pleasing due to their uneven sizes, which can b ...

htmlcssfrontendbootstrap-4

Switching the theme color from drab grey to vibrant blue

How can I change the default placeholder color in md-input-container from grey to Material Blue? I have followed the instructions in the documentation and created my own theme, but none of the code snippets seems to work. What am I doing wrong? mainApp. ...

javascriptcssangularjsangular-materialmean-stack

ImageMapster for perfect alignment

I'm struggling with centering a div that contains an image using imagemapster. When I remove the JS code, the div centers perfectly fine, indicating that the issue lies with the image mapster implementation. It's a simple setup: <div class=" ...

javascriptjqueryhtmlcss

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

javascripthtmlangulartypescriptrxjs

Send HTML table information from view to Controller action in ASP.NET Core by converting it to a list

Encountering issues with null values in the controller action method, preventing table data rows from being looped through. Model: class: public class Generation { public int Generation1Count { get; set; } public int Generation1TotalS ...

htmljqueryasp.netasp.net-mvchtml-table

Learning to extract information from a JSON file with various key and value combinations

I am facing a challenge with my JSON data file, which contains UserIDs as keys and Passwords as values. My goal is to use JavaScript for validation by reading this JSON file. The structure of my JSON is as follows: IDsNPass = '[{"A":"A15"},{"B":"B15" ...

javascripthtmljson

Dim the entire website

I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...

htmlcss

Sibling selector beside not functional

Trying to create a sliding sidebar without using JavaScript has presented me with a challenge involving an adjacent sibling selector that just won't function as expected. Here is the code snippet causing the issue: .sidebar { position: fixed; ...

htmlcss