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

Question

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!

html css

Answer 1

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

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 3

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>

Answer 4

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

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

Answer №1

Answer №2

Similar questions

file_put_contents - store user-defined variables

Using a PHP switch case statement with an HTML multiple select dropdown

Contrasting Firefox Experience on Mac and Windows

``I'm having trouble getting the onchange event to function properly in a customized

Adjusting the "lang" attribute to modify the font style

Explore and target elements using browser inspection

Unusual issue with horizontal menu display in Firefox on Mac

Calculation error causing incorrect top value display in Chrome [bug alert!]

What causes my paragraph textContent to vanish after briefly displaying its value?

How can I prevent the interpolation of "${variable}" in HTML when using AngularJS?

Implement a function that allows users to input a pin code digit by digit using a single HTML input

Ways to align three divs next to each other in an HTML structure?

Easily done! Using JavaScript to generate a blinking cursor on a table

JavaScript Evaluation Test Outcome

Implementing uniform column width in a Material-UI Grid

Eliminating render-blocking CSS in PageSpeed - one stylesheet at a time

Center text within a dropdown using Bootstrap styling

How can I simplify the CSS properties for this border?

Tips for automatically focusing a div upon page load

Transferring information between pages in PHP