Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Konrad Pilch
2,435 PointsHow did this CSS work?
Hi,
.mask:hover > .events-container .event-date{
left:10px;
}
So, i can't remember, how did this go?
When i hover mask, i apply opacity to 0.8 background.
But when i apply opacity to it, i also want .event-date to be left:10px.
I can't remember how this code went.
Please someone help me.
3 Answers
Steven Parker
229,744 PointsNow that I see the code, it's clear that position was not set already, and that event-date is not a descendant of mask. But how about this:
.event-date:hover {
position: absolute;
left: 10px;
}
.mask:hover {
opacity: 0.8;
}
Tobias Helmrich
31,602 PointsHey Konrad,
what you're doing with the code you posted is selecting a direct child inside of an element with the class of mask that has the class .events-container and then you're selecting an element inside of this element with the class of .events-container that is a direct child of .mask and you're positioning it with left: 10.
However note that you have to specify a unit (in your case px) to make it work and that the element you're positioning is positioned absolute or fixed, it doesn't work with relative positioned elements. If you want to keep the element positioned relative you should probably use a margin. You could for example write it like this:
.mask:hover > .events-container .event-date{
position: absolute;
left: 10px;
}
I hope I understood your question correctly and that I could help, if you have further questions feel free to ask them! :)
Konrad Pilch
2,435 PointsHI, i think its this what im looking for, im pretty sure, but it doesn't work. Im sure its right, i haven't done this effect in ages : p I forgot how to do it.
Now probably something is wrong somewhere else. : p
Tobias Helmrich
31,602 PointsIf you want to make an effect with a transition I think it would be better if you used the transform property with a value of translateX(10px). I quickly made an example here to help you understand what I mean: Link to Codepen. I hope that's what you're trying to achieve or else I misunderstood you!
Tobias Helmrich
31,602 PointsI see, but just to make sure: About what part you're trying to make are we talking right now in particular? :)
Konrad Pilch
2,435 PointsWell.
Now i have to problems xd
The hover state. When i look at it, it has a white background, followed by a transition (radial in) or from outside in, and while hovering it, to move the DATE 10px to the right.
Steven Parker
229,744 PointsWithout seeing the actual HTML and the other CSS, I have to make some guesses here. Based on the partial CSS you included, it appears that you have an element with the class mask that you want to change opacity on. And this element has a child with class events-container which in turn has a descendant with class event-date that you want to change position on. I assume you have established other properties (like position) elsewhere.
If I have all that right, you already have the CSS part to adjust position (just add px to the value). Now you just need to add the part to change opacity:
.mask:hover {
opacity: 0.8;
}
Konrad Pilch
2,435 Points <ul class="events-container">
<h1 class="page-title">Events masonry sytle</h1>
<div class="row">
<li class="single-events col-sm-4 col-xs-12">
<div class="event-img">
<img src="http://nitro-studio.com/themes/unik/wp-content/uploads/sites/2/2013/02/4.jpg">
<div class="mask">
<div class="info">
<i class="fa fa-search"></i>
</div>
</div>
<div class="event-date">
<p>JANUARY 28, 2016</p>
</div><!-- event-date -->
</div>
<div class="event-description">
<h4>Kary Perry</h4>
<p>New York, NY</p>
</div><!-- /event-description -->
</li><!-- /col-* -->
</div><!-- /row -->
</ul><!-- /events-container -->
/* Single Event on Events Page */
.single-events{
cursor: pointer;
}
.single-events img:hover{
border:1px solid red;
}
.events-container{
background: rgba(39, 53, 64, 0.91);
position: relative;
padding: 25px;
}
.events-container .event-description{
background: rgba(0,0,0,0.3);
padding: 10px;
z-index: 100;
text-align: center;
}
.events-container .event-description h4{
margin-bottom: 5px;
}
.events-container .event-description p{
color: #CCCCCC;
}
.events-container img{
width: 100%;
min-height:339px;
position: relative;
}
.events-container .event-img{
position: relative;
}
.events-container .event-date{
background: rgba(221, 84, 84, 0.87);
color:#EEEEEE;
padding: 8px;
text-transform: uppercase;
text-align: center;
font-size: 12px;
line-height: 14px;
position: absolute;
left:-5px;
bottom:0;
z-index: 55;
-webkit-transform: translate(0,-8px);
transform: translate(0,-8px);
}
/* Mask */
.events-container .single-events .info{
top:0;
bottom:0;
right: 0;
left:0;
}
.mask{
opacity: 0;
background: #000;
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
Konrad Pilch
2,435 PointsWhen the mask is covered, i want the event-date to be left:10, not -5. If that makes sense : p
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsWell, because there will be another .event-date class in single-event page which i will use.
Yes but then i need to hover both of them in the same time for them to get the ffect in which is impossible.
While hovering the mask, without toching the event-date html, it needs to move left 10px.
Steven Parker
229,744 PointsSteven Parker
229,744 PointsThey are both descendants of event-img, so how about this:
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsLol yeah, that wokrs.
But how do you use the > though? : p
Steven Parker
229,744 PointsSteven Parker
229,744 PointsYou don't need > in this situation. But when you do use it it means "is a child of" (reading right-to-left). The item on the left must be the direct parent of the item on the right.
This differs from a space, which means "is a descendant of". So there can be many levels of nesting in between.
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsCould you give me and example when to use > please?
Tobias Helmrich
31,602 PointsTobias Helmrich
31,602 PointsHey Konrad,
this would be a really simple and not really useful example but I hope it helps you to understand it:
I have five div container in this example. One container that contains all the others with the class of wrapper. Inside there are three div container with the class of nested-div and one with the class of sub-wrapper.
If I would write
now, all the divs with the class of nested div inside the wrapper would become blue. However if I write
instead, only the two divs with the class of nested-div that are direct children of the wrapper (so not nested inside of any other elements, in particular not the child of sub-wrapper) would have a blue background. The one nested inside of the div with the class of sub-wrapper wouldn't change because it's not a direct child. I hope that helps! :)
Tobias Helmrich
31,602 PointsTobias Helmrich
31,602 PointsSorry, I had a few mistakes in the description of the code as I decided to update the code but I didn't update the description so if you see mistakes you might have to refresh because I edited it! :)