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

Issue with Error in Expanding Label in Material-Ui using React

I have managed to increase the size of the Label in the TextField component of my React application. However, I am encountering an issue where it overlaps some text on its right when it shrinks. Here is the link for reference import React from "react ...

cssreactjsmaterial-uijss

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

htmlcss

Difficulty viewing image in Firefox using HTML <img> tag

I'm encountering an issue with rendering an img tag in an HTML page. The img source is a file located on a remote server. Surprisingly, when attempting to display the image in Firefox using: file://///server/folder1/folder2/name.jpg it shows up prop ...

htmlimage

What methods can be employed to prevent a custom CSS from overriding my personal styles?

Issue I've created a website with unique styles that I really like. However, I want to enhance its functionality by incorporating a custom dialog box from the BootBox library. The problem is that the extensive style sheet that comes with BootBox com ...

htmlcsstwitter-bootstrapbootbox

Can you actually achieve the creation of an Equilateral responsive triangle with a background image using CSS?

It's important that it works in IE11 as well. I've attempted: Using traditional triangle-creating techniques with borders - Unsuccessful, no background image appeared. Clip-path - Failed, no support in IE Triangles created us ...

htmlcsssvg

What is the best method for arranging checkboxes in a vertical line alongside a list of items for uniform alignment?

Trying to come up with a solution to include checkboxes for each item in the list, maintaining even vertical alignment. The goal is to have the checkboxes in a straight vertical line rather than a zigzag pattern. Coffee Nestle ...

javascriptjqueryhtmlcss

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

cssreactjs

Safari failing to show SVG at correct alignment

I am looking to implement a unique feature on my website where image placeholders are displayed for 1 second before fading out to reveal the actual image. These image containers will be responsive, adjusting to fit the size of their parent container. In a ...

cssgoogle-chromesvgsafari

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

csscss-selectorspolymer-1.0paper-elements

What is the best way to position this sidebar on the right instead of the left?

I am having trouble implementing a responsive sidebar with a toggle icon. I found one on Codepen, but it is currently aligned to the left. How can I align it to the right? I have been searching through the code and have tried using text-align and justify- ...

htmlcss

Is a Text-Only View Possible with WebView?

Could someone help me figure out how to restrict a WebView to only load text in my WinRT XAML App? I am looking for a simpler solution than having to download the source and manually editing img tags. ...

htmlxamltextwebviewwindows-runtime

Insert text within a span tag next to a picture

Greetings everyone, Here is the current structure I am working on: <div class="payment-option clearfix"> <span class="custom-radio pull-xs-left">...</span> <label style="display:inline;width:100%"> <span style="fl ...

htmlcsstwitter-bootstrap-3

Utilize Android accelerometer data to bring objects to life with animation

Utilizing an Android app, I am streaming accelerometer data to a Python script on my PC. The data is then saved to a text file. My goal is to utilize Javascript and jQuery to animate a 3D CSS cuboid (representing the device) to replicate the movements capt ...

javascriptandroidjquerypythoncss

Looking for assistance with aligning UL elements in CSS using absolute positioning for a dropdown effect

I'm currently working on implementing a language switching feature on this website. The concept involves using a SPAN element that reveals a dropdown box (based on UL) containing a list of available languages when hovered over. Below is a preview of t ...

csslisthtmldrop-down-menupositioning

Is there a way to update the Angular component tag after it has been rendered?

Imagine we have a component in Angular with the selector "grid". @Component({ selector: 'grid', template: '<div>This is a grid.</div>', styleUrls: ['./grid.component.scss'] }) Now, when we include this gri ...

javascripthtmlangular

Iterating over an array and displaying elements on the webpage

Struggling to access an array and loop through it, but only able to print out one element instead of all. Need a hint on how to solve this issue. See my code below: let toppingsCount; const burger = document.createElement('div'); const toppingsD ...

javascripthtmlcssdomcss-selectors

The Ineffectiveness of the Form Class

I have been trying to personalize the appearance of my bootstrap form by applying my own custom CSS. However, despite creating a class for my form and making changes to its CSS properties, the style of the form remains unchanged. Take a look at my form: ...

htmlcssformswebtwitter-bootstrap-3

Is there a way to transfer all the selected items to PHP using AJAX?

I am looking for a way to send all the checked items into PHP using AJAX. I want to include the checkbox ID and inner text in the information that is sent. For example, if I check box1 and box2, I want the relevant information to be saved in Data and then ...

javascriptphpjqueryhtmlajax

Begin expanding new circles in jQuery from the exact location where the previous ones ended

A captivating circle animation unfolds before your eyes, featuring dark blue circles that materialize at random points and gradually expand. As these expanding circles cover more than half of the screen, their color shifts to a lighter shade of blue. Exper ...

jquerycss

How come a child element with a lower z-index than its parent doesn't appear behind the parent?

I'm currently investigating why a child element fails to appear behind its parent element when it has a lower z-index value than the parent. The issue seems to arise only when the default z-index value of the parent is modified. Let's consider a ...

htmlcssz-index