Becky Becky - 5 months ago 12
CSS Question

Displaying a hidden div with a transition on the x property

I have an image and then a banner underneath of the image. When you hover over the image, I have it go up 100px on the x-axis. What I can't figure out is how to bring the banner up the x-axis with it while hovering over the image. I am not certain if it is the way I am trying to execute the hover or what.

Does anyone see what I'm doing wrong?



.project-block {
width: 33.33333333333333333333333333%;
height: 100%;
display: inline-block;
overflow: hidden;
}
.project-block img {
width: 100%;
height: 300px;
-webkit-transition-duration: .5s;
transition-duration: .5s;
position: relative;
}
.project-block img:hover {
transform: translate(0, -100px);
-webkit-transform: translate(0, -100px);
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.project-block-banner {
position: relative;
width: 100%;
height: 100px;
bottom: -.01;
background: #00a16d;
}
.project-block img:hover.project-block-banner {
transform: translate(0, -100px);
-webkit-transform: translate(0, -100px);
-webkit-transition-duration: .5s;
transition-duration: .5s;
}

<div class="project-block">
<a href="projects/eslich-wrecking">
<img src="images/work/eslich.jpg" alt="">
<div class="project-block-banner">
<div class="project-block-banner-container">
<div class="project-block-banner-name">company</div>
<div class="project-block-banner-description">htrhr ghrth ht</div>
</div>
</div>
</a>
</div>




Answer

You can use + selector in CSS, also I added transition-duration to banner itself.

.project-block {
	width: 33.33333333333333333333333333%;
	height: 100%;
	display: inline-block;
	overflow: hidden;
}
.project-block img {
	width: 100%;
	height: 300px;
	-webkit-transition-duration: .5s;
    transition-duration: .5s;
	position: relative;
}
.project-block img:hover {
	transform: translate(0, -100px);
	-webkit-transform: translate(0, -100px);
	-webkit-transition-duration: .5s;
    transition-duration: .5s;
}
.project-block-banner {
	position: relative;
	width: 100%;
	height: 100px;
	bottom: -.01;
	background: #00a16d;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}
.project-block img:hover + .project-block-banner {
	transform: translate(0, -100px);
	-webkit-transform: translate(0, -100px);
	-webkit-transition-duration: .5s;
    transition-duration: .5s;
}
<div class="project-block">
  <a href="projects/eslich-wrecking">
    <img src="images/work/eslich.jpg" alt="">
    <div class="project-block-banner">
      <div class="project-block-banner-container">
        <div class="project-block-banner-name">ESLICH WRECKING</div>
        <div class="project-block-banner-description">htrhr ghrth ht</div>
      </div>
    </div>
  </a>
</div>

Comments