knic1ned knic1ned - 1 month ago 4
CSS Question

CSS effect two elements

I'm trying to affect two elements, the event-thumbnail

img:hover
will effect also
.event-date
.
when I'm trying to do something like
.event-date+.event-date

its effect only on the
.event-date
.



.event-list .event-thumbnail img{
display: block;
transition: 0.8s;
}

.event-list .event-thumbnail img:hover +.event-date {
transform: scale(1.1,1.1);
}

.event-thumbnail .event-date{
position: absolute;
left: 0;
top: 0;
background:#07A2DD;
color:#FFF;
width: 60px;
text-align: center;
padding: 10px 0;
line-height: 1;
font-weight: 600;
}

<div id="latest-events">


<h1><a href="http://sd.esy.es/category/events/">events</a></h1>


<div class="event-list clearfix">

<figure class="event-thumbnail">
<a href="http://sd.esy.es/event2/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt="2">

<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">oc</span>
</div>
</a>
</figure>

<div class="event-detail">
<h4 class="event-title">
<a href="http://sd.esy.es/event2/">2</a>
</h4>

<div class="event-excerpt">
text

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

<div class="event-list clearfix">

<figure class="event-thumbnail">
<a href="http://sd.esy.es/event3/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt=" 3">

<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">oc</span>
</div>
</a>
</figure>

<div class="event-detail">
<h4 class="event-title">
<a href="http://sd.esy.es/event3/"> 3</a>
</h4>

<div class="event-excerpt">
text text text text text text text text text text text text text text text text

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

<div class="event-list clearfix">

<figure class="event-thumbnail">
<a href="http://sd.esy.es/event1/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt=" 1">

<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">feb</span>
</div>
</a>
</figure>

<div class="event-detail">
<h4 class="event-title">
<a href="http://sd.esy.es/event1/">1</a>
</h4>

<div class="event-excerpt">
some text </div>
</div>
</div>
</div>




Answer

Try this :

.event-thumbnail img,
.event-thumbnail img + .event-date {
    transition: 0.8s;
}
.event-thumbnail img:hover,
.event-thumbnail img:hover + .event-date {
    transform: scale(1.1, 1.1);
}