CODEWITHSUNDEEP
htmlcss
Anna Wellington
Anna Wellington

Reputation: 323

HTML CSS Overflow on hover without changing positions

Can anyone kindly help me out with my css+html issue? Please refer the code snippet I have added.

What I need to achive, 1. The boxes(.box) with images to stay fixed 2. The hidden description (.hidden) to go over the below image box when hovered without moving it

Can someone please help me figuring this out?

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

Upvotes: 1

Views: 81

Answers (2)

bilu sau
bilu sau

Reputation: 61

.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>Hello!</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>Hello!</h2></div>    
</div>

Upvotes: 0

Pete
Pete

Reputation: 58432

Try the following. I have fixed your nested anchors, removed some duplicate ids and positioned the caption absolutely. The only thing I would say is the caption has an 18px minus margin - not sure what creates that gap for the margin to be needed

Also if you want to stop the blinking effect, you need to use the same size images - your hover one is slightly larger

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

Upvotes: 1

Related Questions