Hover over the image to reveal sliding text

I am attempting to incorporate a CSS3 hover effect into my images, where hovering over an image will cause some text to slide up on a white background. However, I have encountered issues with conflicting code, as I also have overlay text and a 'new' sign in the corner.

Below is the code along with inline styles:

<img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;">
<div style="display: inline-block; position: absolute; top: -11px; right: -11px;">
  <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png">
</div>
<div style="position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); text-align: center;">
  <p style="display: inline-block; background: rgba(0, 0, 0, 0.35); font-family: 'Amatic SC'; color: #FFF; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;">
    Brean Sands
  </p>
</div>

htmlcss

Answer №1

This solution could be beneficial.

.img {
  position: relative;
  border: 10px solid #f00;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin: 10px;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .5s;
  overflow: hidden;
  height: 0;
  background: white;
  text-align: center;
  font-size: 50px;
}
.img:hover .overlay,
.overlay:hover {
  height: 100%;
  background: white;
}
.img > img {
  display: block;
}
<div class="img">
  <img src="http://www.placehold.it/300/eee" />
  <div class="overlay">Hello!</div>
</div>
<div class="img">
  <img src="http://www.placehold.it/400/eee" />
  <div class="overlay">Bye!</div>
</div>

Answer №2

It might be best to avoid using JavaScript in this scenario unless absolutely necessary. Based on how I interpret your question, achieving the desired outcome can likely be accomplished through CSS. Consider moving all inline styles to a style tag or integrating the new styles into existing inline styles if inline styling is essential for your project.

#container:hover #name {
  transform: translate(0, 0) !important;
}

#container #name {
  transition: transform 0.25s ease;
  transform: translate(0, 100%) !important;
}

#container {
  overflow: hidden;
  position: relative;
}

#name {
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);
}
<div id="container">
<img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;">
<div style="display: inline-block; position: absolute; top: -11px; right: -11px;">
  <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png">
</div>
<div id="name" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center;">
  <p style="display: inline-block; font-family: 'Amatic SC'; color: #333; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;">Brean Sands</p>
  <p>A description</p>
</div>
</div>

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 issues with the functionality of my radio button in AngularJS

As I delve into Angular and experiment with some code, I am focusing on implementing the following functionality: 1. Depending on the user's preference for adding additional details, they can choose between 'yes' or 'no' using radi ...

htmlangularjs

Accessing Google Maps offline using HTML5 is a convenient and helpful

Our team is working on an HTML5 application that includes a Google map feature for changing search locations. Recently, we've added an offline version of the app as well. Is there a way to cache the Google map so that when the app is offline, it can s ...

jqueryhtmlgoogle-mapsjquery-mobile

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

Within my application, I have tabs that load a form in each tab with varying numbers of controls. Some tabs may contain a large number of controls while others may have fewer. My goal is to display a loader while the contents are being rendered into the HT ...

javascriptjqueryhtmlangularjs

The downloading functionality of anchor tags is not functioning properly on mobile devices

In the process of developing a mobile app using Ionic Framework, AngularJs, and Html, I encountered an issue. There is a specific page where users are supposed to click on a <div> element to download a wallpaper image. Strangely enough, this works ...

androidhtmlangularjsionic-framework

How can I center align all images using Bootstrap?

My current grid images are aligned in a specific way. https://i.sstatic.net/RmNE9.png However, I aim to adjust the grid images to look like this, specifically focusing on centering "img 1". How can I achieve this? https://i.sstatic.net/frNvp.png HTML ...

htmlcssbootstrap-4

Utilize data attributes for streamlined markup efficiency

I'm facing a challenge with two almost identical animations, the only difference being the positioning of "left vs right". I want to find a way to reuse the same block of code for both .forward and .backward. I have considered using HTML 5 data-attrib ...

jqueryjsonhtmljquery-animate

Using background-image in Internet Explorer has always been a challenge

HTML <div id="banner" style="display: block; background-image: url('images/swirl_home.gif'); background-repeat: no-repeat; background-color: #e7e7e7;"> <div id="Hi"> some text here... </div> & ...

htmlcsscross-browser

The layout causes issues with responsiveness on the Flask app page

I'm currently in the process of developing a web application and I've implemented a navbar.html file as the layout for each page using the following code: eachpage.html : {% extends 'navbar.html' %} {% block body %} <div class=" ...

htmlcssflask

A button that is positioned with a low z-index may be unresponsive to

I am working on aligning an image and a button next to each other so that the image slightly overlaps the button. However, I have noticed that in doing so, the button becomes unclickable. .button{z-index:-1!important;} .image{z-index:1!important;} Any s ...

css

Creating a right-aligned glyph within a Panel header using Bootstrap

I am currently designing a Panel using bootstrap and I would like to include a glyph in the heading, aligned to the right. I tried adding "text-right" to the span tag but unfortunately, it didn't work as expected. Here is the code snippet: < ...

htmlcsstwitter-bootstrap

Adaptable images - Adjusting image size for various screen dimensions

Currently, my website is built using the framework . I am looking for a solution to make images resize based on different screen sizes, such as iPhones. Can anyone suggest the simplest way to achieve this? I have done some research online but there are t ...

javascripthtmlcssresponsemedia-queries

Is your window.location.hash malfunctioning?

I am facing an issue with changing the background color of a <div id="services> when a specific link (index.html#services) is clicked. I have attempted to use the latest jQuery along with the jQuery Color plugin from jQuery Color. The code snippet I ...

javascriptjqueryhtmlxhtml

Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...

htmlcssbootstrap-4

Combining multiple PNG images onto a base image in PHP

I need assistance in merging 24 images with single dashes highlighted into a base circle image using PHP GD, JS or CSS. All images are in PNG format. Your help would be greatly appreciated. ...

phpjquerycssgd

What obstacles may hinder the loading of CSS with PHP variables?

Visit this website for agriculture updates: I have utilized PHP to generate specific color schemes and styles. It seems to function correctly on all tested desktop laptops, however, it fails to load the CSS files (only loads HTML) on a Galaxy Note runnin ...

phpandroidcss

Tips for detecting if text appears in bold on a webpage using Selenium

I came across a pdf document with the following content: <div class=**"cs6C976429"** style="width:671px;height:18px;line-height:17px;margin-top:98px;margin-left:94px;position:absolute;text-align:left;vertical-align:top;"> <nobr ...

c#cssselenium-webdriver

Utilizing the designated link name

As part of my program, I have to generate hyperlinks for each row in a MySQL table. To accomplish this, I used the C MYSQL API to fetch the data from the table: while ((row = mysql_fetch_row(result))) { ....//some code to print the data.... } I am ab ...

htmlmysqlchyperlinkcgi

A guide on traversing a HTML table and cycling through its contents with JavaScript

I'm currently in the process of constructing a grid with 20 rows and 20 columns of squares, but I am encountering difficulties with looping through table values to effectively create the grid. For more detailed information on the html code, please se ...

javascripthtmlcss

Is there a way to manipulate HTML elements on a webpage using Swift and Xcode?

Is it feasible to manipulate HTML elements on a website from an iOS application? For instance, displaying www.google.com using a UIWebView. I am interested in achieving the following, if this idea/concept is doable: Detecting whether the user has input ...

htmliosswiftuiwebview

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

phpcsswordpresswoocommerce