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>
htmlcss

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

Mobile phone experiencing issues with background loop video playback

<video autoplay muted loop id="videobg"> <source src="bgvideo/bgvideo.mp4" type="video/mp4"> </video> I have a background video on my website that works perfectly on desktop but not on iPhone. You can c ...

htmlbootstrap-4

Display a spinning wheel or progress bar while the website is in the process of loading

Looking to construct a treeview using the jquery-treeview plugin but noticing it's quite time-consuming (about 5-7 seconds). I'm interested in adding a spinning wheel or progress bar to indicate loading while the page is processing. Any suggestio ...

javascriptjqueryhtml

Change the code from a for-loop to use the Array#map method

I have been working on a simple JavaScript function and attempting to convert the code from using a for-loop to Array#map. I'm sharing my code in the following fiddle as I am currently learning about array map: http://jsfiddle.net/newtdms2/. function ...

javascriptjqueryhtmlangularjsbackbone.js

Using the `position: sticky` property does not function properly if the HTML element has a height set to

Here is the CSS code I have for the two important items... html, body { background-image: url("../images/background.png"); background-attachment: fixed; height: 100%; } --and-- #navBar { font-family: Cinzel; position: sticky; t ...

htmlcssheightnavbarsticky

Preventing the cascading effects of past hovers with AngularJS

I am working with AngularJS and have the following HTML code snippet. <div class="row" style="margin-left:60px; text-align:center;"> <div class="col-xs-1 " style="margin-left:25px;width:10px; " ng-repeat="image_thumb_id in image_thumbnail_ ...

htmlcssangularjs

Having trouble locating an element using Selenium?

I'm attempting to extract the price of a flight from Google Flights website using Selenium, but I am unable to locate the specific element on the page. Even after scraping the entire page, the element remains elusive. It has been suggested that it may ...

pythonhtmlpython-3.xseleniumweb-scraping

Alerts for drop down menu validation with multiple buttons

My goal is to design a multi-step form that collects user information. This form consists of 5 stages: Step 1: User details (Name, email, phone, age, gender) Step 2: Yes or No question Step 3: Yes or No question Step 4: Yes or No question Step 5: Yes o ...

javascriptjqueryhtml

Purchase Now with Paypal Button

Just starting out with PHP and PayPal buttons! Important: Referring to Mysql items here. I'm attempting to set up an online shop, but I have a concern about PayPal "Buy Now" buttons. If a customer purchases an item, the website receives the money, b ...

phphtmlpaypal

Stack two divs together

It may seem silly, but I just can't get it to work. I'm attempting to enclose two divs with different classes in another div, but my current code is automatically closing the divs. There are multiple sets of divs with classes .panel-heading and ...

javascriptjqueryhtml

What is the process for embedding HTML and CSS content into an Outlook email?

Has anyone experienced trouble adding an HTML and CSS web page to an Outlook email? I attempted to use the "Insert as text" option, but the CSS file is not loading correctly in Outlook. Any suggestions on how to fix this? The error message states that the ...

jquerycsshtmlweb

Including content without triggering the digest cycle (utilizing raw HTML) within a Directive

My goal is to include raw HTML inside a directive for later transclusion (to populate a modal when opened). The issue arises when the contents of dialog-body are executed, triggering the ng-repeat loop and causing the template to be rerun, leading to a po ...

javascripthtmlangularjs

Improve the way you manage the active selection of a button

ts isDayClicked: { [key: number]: boolean } = {}; constructor() { } setSelectedDay(day: string, index: number): void { switch (index) { case 0: this.isDayClicked[0] = true; this.isDayClicked[1] = false; this.isDay ...

htmlcssangulartypescriptionic-framework

Positioning of buttons within a div

I am currently designing an inspiration post style: https://i.stack.imgur.com/I5J0H.png However, I am encountering some challenges while creating it: The buttons are not rounded when the window size is changed Social icons are not being displayed I am ...

jqueryhtmlcssbootstrap-4

What is the best way to implement autoplay sound on a JavaScript webpage?

I'm currently working on a web system aimed at monitoring values from a database, and I have the requirement to trigger a sound alert when a specific range of values is received. Despite trying various examples found online, none of them have been suc ...

javascripthtml

The process involves transferring information from a specific div element to a database. This particular div element obtains its data after receiving an appended ID

It's a bit complicated, but I'm working on creating a tag system. I'm fetching data from a database with an AJAX call using the "@" symbol. Everything is working fine - the tags are being generated, but I'm having trouble retrieving and ...

javascriptphpjquerycssajax

Locating HTML snippets within a document

I am trying to extract all HTML <p>...</p> elements from a document. I have been attempting to use regular expressions (Regex) with the following pattern: Regex regex = new Regex(@"\<p\>([^\>]*)\</p\>" ...

c#.nethtmlregex

The chosen date is not preserved within the select box

I have these specific items: $scope.items = [{"date":"2014-12-26T05:00:00.000Z","display":"6:00"}, {"date":"2014-12-26T05:15:00.000Z","display":"6:15"}, {"date":"2014-12-26T05:30:00.000Z","display":"6:30"}] When I use the following code: <select ...

htmlangularjsangularjs-ng-options

Tips for saving the circular slider value to a variable and showcasing it in the console

I have coded a round slider and need assistance with storing the slider value in a variable and displaying it in the console using JavaScript. I want to store the tooltip value in a variable for future use. $("#slider").roundSlider({ radius: 180, min ...

javascripthtmlcssconsoleround-slider

Why is the Footer component in Next.js Styling not staying at the bottom of the screen as intended?

Why is the Footer component not at the bottom of the screen in Next.js Styling? import Head from "next/head"; import Navbar from "./Navbar"; import Footer from "./Footer"; const layoutStyle = { display: "flex", flexDirection: "column", height: "10 ...

cssreactjsnext.js

Unusual Glitch in Bootstrap 3 Dropdown Menu

I am currently developing a website using Bootstrap 3. I am encountering an issue with the navbar dropdown. When I click on the link, it changes to show "expand child menu" and "collapse child menu". To clarify, here is the image I am referring to: Initi ...

javascripthtmlcsstwitter-bootstrap-3