Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Konrad Pilch
Konrad Pilch
2,435 Points

How 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
Steven Parker
216,133 Points

Now 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;
}
Konrad Pilch
Konrad Pilch
2,435 Points

Well, 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
Steven Parker
216,133 Points

They are both descendants of event-img, so how about this:

.event-img:hover .event-date {
  position: absolute;
  left: 10px;
}
.event-img:hover .mask {
  opacity: 0.8;
}
Konrad Pilch
Konrad Pilch
2,435 Points

Lol yeah, that wokrs.

But how do you use the > though? : p

Steven Parker
Steven Parker
216,133 Points

You 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
Konrad Pilch
2,435 Points

Could you give me and example when to use > please?

Tobias Helmrich
Tobias Helmrich
31,601 Points

Hey Konrad,

this would be a really simple and not really useful example but I hope it helps you to understand it:

<div class="wrapper">
    <div class="nested-div">

    </div>
    <div class="nested-div">

    </div>
        <div class="sub-wrapper">
                <div class="nested-div">

                </div>
        </div>
</div>

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

.wrapper .nested-div {
  background: blue;
}

now, all the divs with the class of nested div inside the wrapper would become blue. However if I write

.wrapper > .nested-div {
  background: blue;
}

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
Tobias Helmrich
31,601 Points

Sorry, 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! :)

Tobias Helmrich
Tobias Helmrich
31,601 Points

Hey 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
Konrad Pilch
2,435 Points

HI, 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
Tobias Helmrich
31,601 Points

If 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!

Konrad Pilch
Konrad Pilch
2,435 Points

Im trying to re-create this .

xd

With my own code and my own logic.

Tobias Helmrich
Tobias Helmrich
31,601 Points

I see, but just to make sure: About what part you're trying to make are we talking right now in particular? :)

Konrad Pilch
Konrad Pilch
2,435 Points

Well.

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
Steven Parker
216,133 Points

Without 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
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
Konrad Pilch
2,435 Points

When the mask is covered, i want the event-date to be left:10, not -5. If that makes sense : p