No simultaneous hover effect on image and selected item
Question
I'm kinda stuck right now in making the website of the company I'm working for. I'm making a timeline for the company activities. Here's my problem: I can't seem to trigger the hover effect on both the image and the text unless I hover only on the image itself.
Here's where I am right now with my HTML:
<body><center>
<div class="container" style="overflow:auto; padding: 1em;">
<div class="timeline">
<div class="timeline-item">
<div class="year">2014<span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
</div>
</div></center>
Here's my css:
<style>
div {
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.timeline {
width: 400px;
}
.timeline .timeline-item {
width: 100%;
}
.timeline .timeline-item .info, .timeline .timeline-item .year {
color: #eee;
display: block;
float:left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
color: #ccc;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.timeline .timeline-item .year {
font-size: 24px;
font-weight: bold;
width: 22%;
}
.timeline .timeline-item .info {
width: 100%;
width: 78%;
margin-left: -2px;
padding: 0 0 40px 35px;
border-left: 4px solid #aaa;
font-size: 14px;
line-height: 20px;
}
.timeline .timeline-item .marker {
background-color: #fff;
border: 4px solid #aaa;
height: 20px;
width: 20px;
border-radius: 100px;
display: block;
float: right;
margin-right: -14px;
z-index: 2000;
position: relative;
}
.timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
color: #444;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
color: #0F8DC7;
}
.timeline .timeline-item .marker .dot {
background-color: white;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
display: block;
border: 4px solid white;
height: 12px;
width: 12px;
border-radius: 100px;
float: right;
z-index: 2000;
position: relative;
}
.timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background-color: #0F8DC7;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}
img{
transition: all 1s ease;
opacity: 0.2;
filter: alpha(opacity=20);
}
img:hover{
position: relative;
opacity: 1.0;
filter: alpha(opacity=100);
}
</style>
Hope you guys can help me with this. Thanks!
1 answers
solution1
0 2014-11-12 08:44:57
first of all,if u use HTML5, the center-tag is obsolete, use a div wrapper with fixed width and margin:0px auto to center the div. In ur case, its the div.container
div.container {
width:1000px;
margin:0px auto; /* instead of 0px choose ur own margin top and bottom */
}
to animate the img when hovering the timeline-item div, u have edit the last part img:hover { [...] } by changing its assignment to the img in the timeline-item:hover and add transition to it:
.timeline .timeline-item.active .info, .timeline .timeline-item:hover .info img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
position: relative;
opacity: 1.0;
filter: alpha(opacity=100);
}
works for me, tested in iron/chromium 38.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.