CODEWITHSUNDEEP
htmlcss
sklrboy
sklrboy

Reputation: 451

Overlay caption selection on parent hover

I'm working on on a caption for my gallery overlay, which would move onto the overlay on hover, changing it's top attribute, then on mouse out it would hide back below the thumbnail. So far I've tried this way, but I'm not sure how to select the .gallery-caption at .gallery-item:hover after I've specified some attributes separately at .gallery-item:hover. Is there some clever solution, or should I use jQuery instead?

.gallery {
  margin-top:50px;
}
.gallery-item {
  padding:0px;
  border:1px solid white;
  position:relative;
}
.gallery-overlay {
  background-color:rgba(255,255,255,0);
  position:relative;
  width:100%;
  transition:1s;
}
.gallery-overlay img {
  z-index:-1;
  position:relative;
}
.gallery-overlay:hover {
  background-color:rgba(255,255,255,.7);
  transition:1s;
}
.gallery-overlay:hover + .gallery-caption {
  top:-50px;
  transition:1s;
}
.gallery-caption {
  height:50px;
  display:none;
  position:absolute;
  transition:1s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="gallery clearfix col-sm-10 col-sm-offset-1">
  <div class="row">
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
  </div>
  <!-- new row starts -->
  <div class="row">
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
  </div>
</div>

Upvotes: 0

Views: 255

Answers (2)

Majid Abbasi
Majid Abbasi

Reputation: 1531

You can define following code for your caption:

.gallery-caption{height:50px;
   display:none;
   position:absolute;
  transition:1s; 
  z-index:999}

And define following code for caption items:

.gallery-item:hover .gallery-caption{display:block; }

Upvotes: 2

TBone
TBone

Reputation: 29

I have a feeling this could be done with CSS but I would suggest a jQuery solution (on hover or similar. :)

Upvotes: 0

Related Questions