Need to apply hover to 2nd div when hover over 1st div

Fahad Sohail

CSS:

#content-items .thumb-artist img {
width: 220px;
position: relative;
z-index: 10;
height: 147px;
}

#filter-artist {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 25px 0 25px 10px;
position: relative;
font-weight: bold;
color: #666666;
text-transform: uppercase;
float: left;
width: 100%;
line-height: 1.4em;

}

#filter-artist #s {
border: 0;
font-size: 10px;
color: #666666;
background: transparent;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding: 1px 0px;
width: 80%;
}

#content-items {
width: 960px;
margin: 0 auto;
color: #fff;
}

#filter-artist span {
float: left;
}

#filter-artist a {
color: #666666;
padding: 0 8px;
float: left;
}

.active-filter {
color: #fff!important;
}

#filter-artist #submit {
background-image: url(img/icons.png);
background-position: -84px 0px;
background-color: transparent;
border: 0;
height: 14px;
line-height: 0;
padding: 0;
width: 14px;
float:right;
}

#filter-artist > p {display:none;}

#filter-artist form {
float: left;
border-bottom: 1px solid #666666;
}

#filter-artist #submit:hover {
background-image: url(img/icons.png);
background-position: -84px -14px;
}

#content-items .artist {
width: 25%;
float: left;
padding: 0 1% 40px 1%;
line-height: 1em;
height: 270px;
height: 190px!important;
}

#content-items .thumb-artist {
position: relative;
}

.thumb-artist img:hover .social-content {
opacity:1;
}

#content-items .artist h3 {
font-size: 18px;
margin: 10px 0;
line-height: 1em;
color: #fff;
font-family: "futura-pt",sans-serif;
}
}

element.style {
display: none;
}

#load-items .social-content {
position: absolute;
top: 80%;
left: 0%;
z-index: 15;
width: 100%;
text-align: center;
opacity:0;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-out;
}


.social {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 1em;
display: inline-block;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
line-height: 11px;
margin-right: 4px;
}

.facebook {
position:relative;
background-image: url(img/icons.png);
background-position: -3px -1px;
width: 20px;
height: 20px;
padding: 5px;
z-index:15;
float:left;
}

.web {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
float:left;
}

.sat-color {
background-color: #ff0033;
padding: 5px;
}

.social-content a:hover {
color: #ff3333;
}

.twitter {
position:relative;
background-image: url(img/icons.png);
background-position: -45px -1px;
width: 20px;
height: 20px;
padding: 5px;
float:left;
}

#load-items .social-content:hover {
position: absolute;
top: 80%;
left: 0%;
z-index: 15;
width: 100%;
text-align: center;
opacity:1;
}

.sat-color:hover {
background-color: #ff3333;
color: #fff !important;
}

HTML:

<article id="content-items">
<div id="filter-artist">
<span>FILTER:</span> 
<a href="http://downunderlabelgroup.com/artists">ALL</a><a href="http://downunderlabelgroup.com/artists-newest" class="active-filter">NEWEST</a><a href="http://downunderlabelgroup.com/artists-alphabetical">ALPHABETICAL</a></div>
<div id="load-items">

            <div class="artist">

            <div class="thumb-artist">

            <img width="300" height="138" src="http://downunderlabelgroup.com/wp-content/uploads/2013/03/k_oconnor_lge-300x138.jpg" class="attachment-medium wp-post-image" alt="Kim O'Connor">            

           <span class="social-content">

            <a href="https://www.facebook.com/TroyeSivan" class="facebook social" target="_blank">&nbsp;</a>

            <a href="https://twitter.com/TroyeSivan" class="twitter social" target="_blank">&nbsp;</a>

            <a href="http://troyesivan.com/" class="web social sat-color" target="_blank">OFFICIAL SITE</a>

            </span>

            </div>

           <h3 class="name-artist">Troye Sivan</h3>

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

At the moment the hover effect is only applied when the mouse is hovered onto the social content. I would like to apply it to the whole picture.

So if anyone hovers onto the image the social content is displayed.

Thanks alot.

Stickers

There are 2 options, 1 make the hover on the div, 2 hover on the img

1st option (recommended):

#content-items .thumb-artist:hover .social-content {
   opacity: 1;
}

2nd option (use + next selector):

#content-items .thumb-artist .wp-post-image:hover + .social-content {
    opacity: 1;
}

DEMO: http://jsfiddle.net/7w8spct6/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Hover over effect only to apply to specific div

From Dev

div overlapping when hover over divs

From Dev

Div Displays on Image Hover, But Blinks When I Hover Over It

From Dev

Hover 1st DIV affect all other 1st DIVS

From Dev

:hover over <div> does not apply to all its child elements

From Dev

Display another div when someone hover over a div

From Dev

how to make div appear when hover over another div

From Dev

DIV over iframe blinks when I hover the mouse over this

From Dev

div hover not apply color CSS

From Dev

Hover over DIV to expand width

From Dev

Loading a 2nd DIV on submit button click on the 1st DIV leaving the 1st DIV visible on the same page

From Dev

Loading a 2nd DIV on submit button click on the 1st DIV leaving the 1st DIV visible on the same page

From Dev

Make a div appear on hover over another div

From Dev

Hover over/click on div to affect another div?

From Dev

Make a div appear on hover over another div

From Dev

Change a div`s background image when hover over the image

From Dev

Changing text inside div tag when hover over an image?

From Dev

Show text-decoration when hover over div

From Dev

Can I hide the div when you hover over a youtube video?

From Dev

when hover on a div ( Jquery ) Not Working

From Dev

hover effect on div whilst hover over whole a tag

From Dev

How to apply :hover on :after to certain div in CSS

From Dev

CSS change div when hover on another div

From Dev

Replace Div when hover other Div

From Dev

Replace Div when hover other Div

From Dev

Smooth CSS transition on hover over a div

From Dev

Making a whole div change over hover

From Dev

hover over an embedded div and change another one

From Dev

hover link over a non-rectangular div

Related Related

  1. 1

    Hover over effect only to apply to specific div

  2. 2

    div overlapping when hover over divs

  3. 3

    Div Displays on Image Hover, But Blinks When I Hover Over It

  4. 4

    Hover 1st DIV affect all other 1st DIVS

  5. 5

    :hover over <div> does not apply to all its child elements

  6. 6

    Display another div when someone hover over a div

  7. 7

    how to make div appear when hover over another div

  8. 8

    DIV over iframe blinks when I hover the mouse over this

  9. 9

    div hover not apply color CSS

  10. 10

    Hover over DIV to expand width

  11. 11

    Loading a 2nd DIV on submit button click on the 1st DIV leaving the 1st DIV visible on the same page

  12. 12

    Loading a 2nd DIV on submit button click on the 1st DIV leaving the 1st DIV visible on the same page

  13. 13

    Make a div appear on hover over another div

  14. 14

    Hover over/click on div to affect another div?

  15. 15

    Make a div appear on hover over another div

  16. 16

    Change a div`s background image when hover over the image

  17. 17

    Changing text inside div tag when hover over an image?

  18. 18

    Show text-decoration when hover over div

  19. 19

    Can I hide the div when you hover over a youtube video?

  20. 20

    when hover on a div ( Jquery ) Not Working

  21. 21

    hover effect on div whilst hover over whole a tag

  22. 22

    How to apply :hover on :after to certain div in CSS

  23. 23

    CSS change div when hover on another div

  24. 24

    Replace Div when hover other Div

  25. 25

    Replace Div when hover other Div

  26. 26

    Smooth CSS transition on hover over a div

  27. 27

    Making a whole div change over hover

  28. 28

    hover over an embedded div and change another one

  29. 29

    hover link over a non-rectangular div

HotTag

Archive