Achieve hover overflow effect in HTML and CSS without altering element positions

Hey there, I could really use some help with a CSS and HTML issue I'm having. Take a look at the code snippet below:

Here's what I'm trying to achieve: 1. Keep the boxes (.box) with images fixed in place 2. Make the hidden description (.hidden) appear over the image box below it when hovered without moving it

If anyone can assist me with this, I would greatly appreciate it!

.box {
  width: 170px;
  transition: all .4s ease;
  border-bottom: 10px solid #fff;
  color:#000 !important;
}

#caption {
  width: 160px;
  font-size:15px;
  text-decoration:none;
  margin: 0 0 0px 5px;
}

.boximg{
   width: auto;
   max-width: 100%;
   margin-bottom: 8px;
}

.box:hover {
  width: auto;
  max-width: 170px;
  border-bottom: 10px solid #000;
  transition: all .4s ease;
  color:#ccdc29 !important;
  background-color:#000;
}

.box:hover > #hidden  {
  display:block;
  transition: all .3s ease;
  overflow-x: hidden;
}

#hidden  {
  display:none;
  color:#fff;
  margin:5px;
  transition: all .3s ease;
}

.image_off, #home:hover .image_on{
  display:none;
  transition: all .4s ease;
}
.image_on, #home:hover .image_off{
  display:block;
  transition: all .4s ease;
}
<div class="box">
  <a href="#">
    <a href="#"  class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" /></a>
 <br>
 </a>
 <p id="caption">Lorem Ipsum</p>
 <p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>

<div class="box">
  <a href="#">
    <a href="#"  class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" /></a>
  <br>
  </a>
  <p id="caption">Lorem Ipsum</p>
  <p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>

Thanks so much for your help!

htmlcss

Answer №1

Here is the revised code with corrected nested anchors, removed duplicate ids, and absolute positioning for the caption. One thing to note is that there seems to be a gap in the margin requiring an 18px minus margin.

To eliminate the blinking effect, ensure that you use images of the same size. The hover image should match the original image size precisely.

.box {
  width: 170px;
  transition: all .4s ease;
  color: #000 !important;
  position:relative;
  padding:0;
  margin-bottom:10px;
}

.box > a
.box span,
.box img {
 display:block;
}

#caption {
  width: 160px;
  font-size: 15px;
  text-decoration: none;
  margin: 0 0 0px 5px;
}

.boximg {
  width: auto;
  max-width: 100%;
}

.box:hover {
  width: auto;
  max-width: 170px;
  transition: all .4s ease;
  color: #ccdc29 !important;
  z-index:2;
}
.box:hover>#caption {
    display:none;
} 
.box:hover>#hidden {
  display: block;
  transition: all .3s ease;
  background-color: #000;
}

#hidden {
  display: none;
  color: #fff;
  transition: all .3s ease;
  position:absolute;
  left:0; 
  right:0;
  top:100%;
  padding:5px;
  margin:-18px 0 0 0;            
}

.box .image_off,
#home:hover .image_on {
  display: none;
  transition: all .4s ease;
}


.box .image_on,
#home:hover .image_off {
  display: block;
  transition: all .4s ease;
}
<div class="box">
  <a href="#">
    <span class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
      /></span>
    <br>
  </a>
  <p id="caption">Lorem Ipsum</p>
  <p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>
<div class="box">
  <a href="#">


    <span class="boximg" id="home1"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
      /></span>
    <br>
  </a>
  <p id="caption">Lorem Ipsum</p>
  <p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>

Answer №2

.img-with-text{
    position: relative;
    width: 170px;
}
.img-with-text > div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0);
    color: transparent;
    transition: 1s;
}
.img-with-text > div:hover{
    background-color: rgba(0, 0, 0, 0.6);
    color: white;

}
<div class="img-with-text">
    <img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
    <div><h2>Hey there!</h2></div>    
</div>

<div class="img-with-text">
    <img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
    <div><h2>Hey there!</h2></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

Is there a way to deactivate a button upon clicking and then substitute it with a new button that serves a different purpose in AngularJS?

Is there a way to deactivate a button once clicked and substitute it with another button that performs a different task using AngularJS? Here is the button in question: <button type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || ...

javascripthtmlangularjstwitter-bootstrapbutton

What is the code to incorporate a color using PHP?

Question: Is there a way to indicate approval with green color and decline with red color? I've searched for a solution but couldn't find one. PHP Code: <?php if(isset($_POST['approve'])) { $msg = "Approved"; ...

phphtmlcssdatabase

Using ReactJS to search for and replace strings within an array

A feature of my tool enables users to input a string into a textfield and then checks if any words in the input match with a predetermined array. If the user's string contains a specific name from the array, I aim to replace it with a hyperlink. I&a ...

javascripthtmlnode.jsreactjsjavascript-objects

Learn how to easily incorporate a drop-down list into the material-UI Search component within the navbar to enhance the search results

I integrated a Material UI search bar into my React app's navbar following the instructions from the official documentation on MUI. However, the article does not provide any guidance on how to add a dropdown list when selecting the search input field. ...

javascriptcssreactjsmaterial-ui

Obtain the Encoded Data

Unfortunately, I do not have control over domain.com. However, I am able to provide a redirect URL parameter like the one shown below: www.domain.com?retUrl=www.example.com%3Fparameter%3Dvalue Following the provision of retURL (www.example.com?parameter= ...

javascripthtmlsalesforceapex-codeurldecode

Using setInterval together with jQuery to animate CSS based on changes in window size

I've been troubleshooting this issue and trying various methods, but despite it seeming logical, nothing is working. Any assistance would be greatly appreciated since I'm not very skilled in coding. My current challenge involves animating an obj ...

jquerycssanimationsetintervalwindow-resize

Selenium - pausing for scroll completion

I am currently working on automating downloads from a webpage using the selenium tool. My approach involves creating a firefox driver that opens the page and clicks the download button. However, I have encountered an issue where the button needs to be vis ...

pythonhtmlseleniumselenium-webdriverweb-scraping

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

csshtml

Animating the Bookmark Star with CSS: A Step-by-Step Guide

I found this interesting piece of code: let animation = document.getElementById('fave'); animation.addEventListener('click', function() { $(animation).toggleClass('animate'); }); .fave { width: 70px; height: 50px; p ...

javascripthtmlcssanimation

The Datatable feature is malfunctioning, unable to function properly with Javascript and JQuery

As a novice in the world of jquery/javascript, I find myself struggling with what may seem like an obvious issue. Despite following tutorials closely (the code for the problematic section can be found at jsfiddle.net/wqbd6qeL), I am unable to get it to wor ...

javascriptjqueryhtmlcss

Clear, crisp images within a user interface web view

I currently have a webview that is set up to show an image, which can be seen in the code snippet provided below. Along with this image, there is also a [email protected] available in the bundle, sized at 128x128 for use specifically on the iPhone4 ...

htmluiwebview

Conceal an element along with its space, then signal the application to show alternative content using React

Greetings everyone! I seek assistance with a React Application that I am currently developing. As a newcomer to the Javascript world, I apologize if my inquiry seems trivial. The application comprises of two main elements: a loader, implemented as a React ...

javascripthtmlcssnode.jsreactjs

Discover the power of EJS embedded within HTML attributes!

There are two cases in which I am attempting to use an EJS tag within an HTML attribute. SITUATION 1: <input style="background-image: url(<%= img.URL %>)" /> SITUATION 2: <input onchange="handleCheckboxChange(<%= i ...

javascripthtmlnode.jsejs

Display the HTML content retrieved from the SailsJS Controller

Exploring the world of SailsJS, I am on a mission to save HTML content in a database, retrieve it, and display it as rendered HTML. To achieve this goal, I have set up a sails model and a controller. This is what my model looks like: attributes: { ht ...

javascripthtmlnode.jssails.jsejs

Creating a connection to an external website through a JavaScript function within an Angular application

I am currently working on an Angular application. Within the index.html file, there is a header that contains links to external websites. <a href="#" onclick="getExternalUrl('about.html');">Click here </a> <scr ...

javascripthtmlangular

Trouble Arising from Regional Settings in my Hybrid App Developed with CapacitorJS and Vue.js

Issue with capacitor app input Correct input in chrome app I'm facing a problem related to regional settings in my mobile application, developed using CapacitorJS and Vue.js 2. The datetime-local control is appearing in a language that isn't the ...

htmlvuejs2capacitor

Set the text above the image in HTML and center align it

Hey everyone, I'm new to the world of HTML and CSS. Currently, I am working on designing some text above and centering an image. Additionally, I want the text to automatically wrap if the image is too long. Thank you for your help! Below is the code I ...

htmlcss

What is the best way to determine the length of an array using input from an HTML form?

Currently, I am in the process of developing a PHP file and one feature that I would like to implement is creating an array as illustrated in Example 1. As far as my understanding goes, an Array functions like a list where items can be added as shown in Ex ...

phphtmlarraysforms

Giving identification to a pair of elements located within the same column

Struggling with assigning IDs to two elements in a single column - a dropdown and a text element. Managed it in the first scenario, but encountering issues in the second one. Seeking assistance on this matter. Scenario 1: <td> <sele ...

javascriptjqueryhtmlcss

Dropzone JavaScript returns an 'undefined' error when attempting to add an 'error event'

When using Dropzone, there is a limit of 2 files that can be uploaded at once (maxFiles: 2). If the user attempts to drag and drop a third file into the Dropzone area, an error will be triggered. myDropzone.on("maxfilesexceeded", function(file){ a ...

javascriptphphtmldropzone.js