What is the best way to create a hover effect for this text?

When I hover over the image div, the text section will smoothly appear from the bottom. You can see an example of what I want here.

Below, you'll find the HTML and CSS code I've implemented for this effect. ================================================

.photo-album .common .details {
  text-align: center;
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  transform: translateY(200%);
  transition: .3s ease-in;
}

.photo-album .common .photo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: #00000086;
  transform: translateY(100%);
  transition: .3s ease-in;
  z-index: 8;
}

.photo-album .common .photo:hover.photo::after {
  transform: translateY(0);
}

.photo-album .common .photo:hover.details {
  transform: translateY(0);
}
<section class="photo-album">
    <div class="common">
      <div class="photo">
        <div class="border-top border"></div>
        <div class="border-right border"></div>
        <div class="border-bottom border"></div>
        <div class="border-left border"></div>
        <img src="./images/ayon.jpg" alt="">
      </div>
      <div class="details">
        <h1>Ayon Jodder</h1>
        <p>Student of Programming Hero</p>
      </div>
      <div class="overlay"></div>
    </div>
</section>

Answer №1

It appears that you have not utilized the photo-album feature in your HTML code. Here is a snippet of code that you can use as a reference:

<style>
.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}
</style>
<section class="class="hovertext" data-hover="text">
    <div >
      <div>
        <div class="border-top border"></div>
        <div class="border-right border"></div>
        <div class="border-bottom border"></div>
        <div class="border-left border"></div>
        <img src="./images/ayon.jpg" alt="">
      </div>
      <div class="hovertext"data-hover="text">
        <h1>Ayon Jodder</h1>
        <p>Student of Programming Hero</p>
      </div>
      <div class="overlay"></div>
    </div>
</section>

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

Tips for modifying padding in HTML and CSS?

I'm struggling to add padding around the image without affecting the mobile view. Here's what I've tried: float-right or padding-right:250px; // but nothing happens and it affects the mobile view. Please review my code: .fontProfile ...

Customizing Material-UI styles using makeStyles

Currently, I am in the process of building a small portfolio website. Despite my attempts to style an avatar using the makeStyles class, it seems that the Mui avatar root is overriding my desired styling. I am wondering if there is a way to achieve this w ...

Is there a way to access a CSV file containing a comprehensive list of days and months?

I am in the process of designing a booking form for a website, and the client has specified that they prefer a drop-down menu for selecting dates rather than a traditional calendar. To achieve this, I plan to utilize gravity forms. For the date options, I ...

align the text to the left in the center of the page

.center { margin: 0 auto; display: table; } .center .content { display: table-cell; } These CSS styles are used to center align the container with the class .center, while also keeping its contents (in .content) left aligned: <div class="center" ...

Using Jquery variables for calculations and they do not work with numerical values

Hey there, I'm new to this so bear with me. I have a jQuery question that's puzzling me... I'm attempting to set the line height using the following method: var line_height = $('.container').css("height"); console.log(line_height ...

What is the method for asynchronistically loading Material ui fonts?

When using Material-UI, the fonts block the rendering of the first page. If no fonts are loaded, Material-UI defaults to using the Helvetica font until Roboto is downloaded. /signup (localhost) …media/roboto-latin-500.4b218fc7.woff2 (localhost) - 76 ...

Currently, my main focus is on finding a solution to adjusting the background color of the div element named *topnav* to properly match the width of the

I'm having trouble adjusting the width of the topnav background color to fill the entire page without any gaps. I hope that makes sense. Let me know if you need more information. Page displaying gap: Here is the HTML and CSS code: body {background ...

"Implementing a function where two different elements can change the text of a button

I have created a custom FAQ script using dl, dt, and dd elements: $('.faqs dd').hide(); // Hide all DDs inside the .faqs container $('.faqs dt').hover(function(){ $(this).addClass('hover' , 'slow')},function(){ ...

Delete the top row from the table

After extensive searching on various websites, I am still unable to resolve my html or CSS issue. An unexpected line is appearing above the table here. Here's the code snippet that is causing trouble: <table border="0" width="840" cellspacing="0" ...

I found myself pondering the method to achieve the slightly blue tinted box that sits behind the image

Can you assist me in achieving this specific look? I have my MUI app bar and home page set up, but I'm unsure how to create the blue-ish box behind the image. Should I place the container within my app bar or integrate it into my homepage file? Additi ...

Develop interactive card collections in Bootstrap that adapt to different screen sizes

I am currently working on developing a responsive card deck using Bootstrap. The goal is to have the card deck display one card per row on mobile, 2 cards per row on tablet, and 3 cards per row on desktop. Below is the snippet of the code I am using: < ...

Loading screen displayed while transitioning between routes within Angular

I have been struggling to implement a loading spinner in my project. How can I display a loading screen when changing routes in Angular? Here is the HTML code snippet: <div *ngIf="showLoadingIndicator" class="spinner"></div> ...

Troubleshooting Issue with Angular Property Binding for Image Dimensions

Currently, I am exploring property binding in Angular through an example. The idea is to use an image and bind its width, height, and src attributes using property binding. Surprisingly, even though there are no errors and the image renders successfully vi ...

AngularJS: resolving route dependencies

I have a variable $scope.question that contains all the questions for the page. My goal is to loop through the questions page by page. To achieve this, I created a function called questionsCtrl and I am calling this function in the config while setting up ...

The checkbox is not updating as anticipated

I'm currently developing a basic widget that allows the user to change the value of either the check box OR the entire div by selecting them. Below is the code I have implemented: $(document).ready(function() { $(document).on("click", ".inputChec ...

Touch Screen Button Interaction

Planning to create a Kiosk website with HTML5 that includes point and drag & drop functionality. The site will have buttons and images for user interaction, with actions triggered by finger touches on the screen instead of mouse clicks. Would it be more ...

Troubleshooting WordPress <?php body_class(); ?> Problem

After successfully integrating my theme into WordPress, I decided to add WooCommerce to create a shop. However, I encountered an issue where the styles of WooCommerce were not appearing properly. Upon researching, I discovered that the root cause was the a ...

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

I'm having trouble playing the WAV file located at this link. The file plays fine in VLC and the details show that it is a Mono IMA WAV APDCM Audio (ms) file sampled at 24000Hz with 16 bits per sample. However, when I try to play the file by embeddin ...

Creating columns of equal height using Bootstrap 3 and flexbox

Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: Managed to get it done using position absolute and @media screen for image size and padding adjustments, but I believe ...

Is there a way for me to obtain the present value of the chosen button in the list below?

I am working with a group of three buttons labeled English, Hindi, and Urdu. How can I retrieve the value of the selected button in a JavaScript function? <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> ...