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

Having trouble retrieving the default selected value using the index in Angular Material's mat-button-toggle functionality

I'm encountering an issue with setting the default value for a toggle button group. The code is simple and the toggle buttons are correctly fetching values from the index, but I can't seem to get one of them to be default selected. I tried settin ...

javascripthtmlangularangular-material

The issue of AngularJS inline style color not functioning in Internet Explorer 11 has been identified

Hello, I am currently attempting to dynamically change the color of a p tag. However, I am facing issues with IE-11 not supporting this functionality. How can I resolve this problem? <p style="color:{{userData.color}} !important;">{{userData.someTex ...

htmlcssangularjsstylesinline

Implement the addition of a class upon hovering using AngularJS

My goal is to include a new class when hovering over the li element using Angular in the code snippet below. <li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}"> <a href="interna.html"> ...

javascriptcssangularjs

primary and secondary colors within the Material UI design scheme

Is there a way to apply different colors for Cards and Papers in the Material UI Theme that are compatible with both light and dark modes? In my app, I have a list of Cards placed on top of a Paper background. Currently, the default color for both the Pap ...

cssmaterial-uithemes

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/ The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back fac ...

cssanimation3dtransition

Trouble with Selenium Webdriver executing Custom Ribbon Button

I encountered an issue while trying to click on a Custom Ribbon MSCRM2011 Button in an automation script I'm writing. Below is the HTML structure: <li id="contact|NoRelationship|Form|Mscrm.Form.contact.MainTab.ExportData" class="ms-cui-group" unse ...

htmlseleniumxpathselenium-webdriverdynamics-crm

Foundation 4 - image hover effect to display alternate image

I am a newcomer to Foundation 4, but I have some coding experience. Currently, I am in the process of transitioning my photography blog (www.momentaryawe.com/blog) from Wordpress with a custom theme to a custom theme built on Foundation 4. Most aspects of ...

javascriptjquerycsszurb-foundation

The allure of Beautiful Soup lies in its ability to effortlessly gather every <br/> tag nestled within the <strong> element

I'm facing a peculiar issue that's getting on my nerves. Trying to convert HTML into markdown, but the formatting of my HTML is quite unusual. It includes things like: <strong>Ihre Aufgaben:<br/></strong> and <strong> ...

pythonhtmlparsingbeautifulsoupdom-manipulation

The background color should only cover a specific percentage of the element

Here is the current structure I have: <li class="myclass" ng-class="myAngularClass"> <div> div1 <div> div2 </div> </div> </li> The li element has dynamic dimensions and width. The class "myAngularClass" i ...

cssangularjs

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

I have successfully created a table using embedded JavaScript with the help of messerbill. Here is the code: <table id="Table1"> <tr> <th>Kickoff</th> <th>Status</th> <th>Country</th> < ...

javascripthtmlnode.jsejs

I'm experiencing difficulty positioning my iframe within its section container as it appears to be placed outside of it

I'm struggling to understand why my iframe is positioned outside of the designated section. Check out my GitHub Pages site here and view the repository here. Any assistance would be greatly appreciated! ...

htmlcssbootstrap-5

Is it acceptable to nest an HTML document within the <body> tag of another HTML document?

Is it acceptable to nest an HTML document within the body tag of another HTML document? I am considering this approach in order to execute a JavaScript function on body load. Due to the dynamic generation of the main HTML code by a controller (Yii), I ...

phphtmlyii

Is it feasible to transform HTML into EditorJS JSON format?

Is there a way to display an HTML string in editorJS? Show me from the following code example: <h1>The video src attribute</h1><video width="320" height="240" controls src="movie.ogg">Yourbrowser does not su ...

htmlreactjseditorjs

Why should you use DIV comment tags in HTML code and how can you automate their implementation?

As I've been browsing through the codes of various professional websites, I couldn't help but notice how the HTML code is often neatly commented like this: <!-- END DIV Main Menu --> This type of commenting can be really beneficial, don&a ...

htmltagscomments

What are some creative ways to provide video responses to a list of questions?

My task is to create a popup that includes questions and video responses. The challenging aspect for me is how to ensure each question displays a different video in the same location. Additionally, when the user first opens the popup, the initial question ...

javascriptjqueryhtmlcssvideo

Displaying incorrect results within the div container

I have been developing a website where a div element on a specific page displays values from a PHP file. Below is the PHP code responsible for rendering the information on the HTML: $output .= ' <div class="row text-left col-md-3 ...

phphtmlcss

Issue encountered while implementing async functionality in AngularFireObject

I'm encountering difficulties with the async feature in AngularFireObject. Is there a solution available? Snippet from HomePage.ts: import { AngularFireObject } from 'angularfire2/database'; export class HomePage { profileData: Angu ...

htmlangulartypescriptfirebaseionic3

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

javascripthtmlcanvasadobe-animate

Issue with collapsing custom-height navigation bar in Bootstrap 4

I have implemented a Bootstrap 4 navbar with a brand logo image sized at 150px x 33px. Now, I want to increase the height of the navbar to 80px. To do this, I added min-height: 80px; in my CSS. <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to position right and left divs within a content div on the same top-level?

#textblock{ width: 260px; height: 100%; position; border: 1px solid #999999; padding: 0 5px; float: right; font-size: 95%; background-color: #FEF4CC; } #brevillestandard{ padding: 8px 0 0 5px; ...

css