Css hover change another element css

Question

How to change another element css when hover ?

As I know put ~ after the :hover able to do this, What I need is when .shopthumb_gallery ul li img:hover, .shopthumb_gallery_name also enlarge to same width with align bottom.

.shopthumb_wrapper {
	width:auto;
	margin: 0 auto;
}

.shopthumb_gallery {
	margin-top: 30px;
}

.shopthumb_gallery ul {
	list-style-type: none;
	margin-left: 35px;
}

/* animation */
.shopthumb_gallery ul li, .shopthumb_gallery li img {
	-webkit-transition: all 0.1s ease-in-out;
  	-moz-transition: all 0.1s ease-in-out;
  	-o-transition: all 0.1s ease-in-out;
  	transition: all 0.1s ease-in-out;
}

.shopthumb_gallery ul li {
	position: relative;
	float: left;
	width: 130px;
	height: 130px;
	margin: 5px;
	padding: 5px;
	z-index: 0;
	cursor:pointer;
}

/* Make sure z-index is higher on hover */
/* Ensure that hover image overlapped the others */
.shopthumb_gallery ul li:hover {
	z-index: 5;
}

/* Image is position nicely under li */
.shopthumb_gallery ul li img {
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #dddddd;
	padding: 5px;
	width: 130px;
	height: 130px;
	background: #f0f0f0;
}

.shopthumb_gallery ul li img:hover {
	width: 200px;
	height: 200px;
	margin-top: -130px;
	margin-left: -130px;
	top: 65%;
	left: 65%;
	text-overflow:none;
}


.shopthumb_gallery_name{
	position:absolute;	
	background:#444;
	opacity:0.8;
	color:#fff;
	font-family: 'Raleway';
	padding:5px;
	font-size:12px;
	bottom:3%;
	width: 120px;
	margin-left:1px;
	overflow: hidden;
    text-overflow: ellipsis; 
}

<div class="shopthumb_wrapper">
                <div class="shopthumb_gallery">
                    <ul>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png">
                        	<label class="shopthumb_gallery_name">NameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameName</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                    </ul>
                </div>

Josh Crozier · Accepted Answer · 2015-01-23 00:25:17Z

Given the HTML you provided, either of the combinators (+/~) would work in this case.

It's worth pointing out that ~ is a general sibling combinator, which selects all succeeding siblings elements. Whereas + is an adjacent sibling combinator which will only select the succeeding adjacent sibling.

Use either of the following:

.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
}

.shopthumb_gallery ul li img:hover ~ .shopthumb_gallery_name {
}

I'd go with the second selector since it may be more future proof (assuming the markup were to change and the label is no longer an adjcent sibling).

.shopthumb_wrapper {
  width: auto;
  margin: 0 auto;
}
.shopthumb_gallery {
  margin-top: 30px;
}
.shopthumb_gallery ul {
  list-style-type: none;
  margin-left: 35px;
}
.shopthumb_gallery ul li,
.shopthumb_gallery li img,
.shopthumb_gallery li label {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.shopthumb_gallery ul li {
  position: relative;
  float: left;
  width: 130px;
  height: 130px;
  margin: 5px;
  padding: 5px;
  z-index: 0;
  cursor: pointer;
}
/* Make sure z-index is higher on hover */

/* Ensure that hover image overlapped the others */

.shopthumb_gallery ul li:hover {
  z-index: 5;
}
/* Image is position nicely under li */

.shopthumb_gallery ul li img {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #dddddd;
  padding: 5px;
  width: 130px;
  height: 130px;
  background: #f0f0f0;
}
.shopthumb_gallery ul li img:hover {
  width: 200px;
  height: 200px;
  margin-top: -130px;
  margin-left: -130px;
  top: 65%;
  left: 65%;
  text-overflow: none;
}
.shopthumb_gallery_name {
  position: absolute;
  background: #444;
  opacity: 0.8;
  color: #fff;
  font-family: 'Raleway';
  padding: 5px;
  font-size: 12px;
  bottom: 3%;
  width: 120px;
  margin-left: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
  bottom: -25px;
  color: red;
}

<div class="shopthumb_wrapper">
  <div class="shopthumb_gallery">
    <ul>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png">
        <label class="shopthumb_gallery_name">NameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameName</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
    </ul>
  </div>

As a side note, I added the transition to the label element by adding an additional selector:

.shopthumb_gallery ul li,
.shopthumb_gallery li img,
.shopthumb_gallery li label {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

I also used bottom: -25px to align the label element to the bottom. It is a hardcoded value, but you could avoid it by changing a few things.

.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
  bottom: -25px;
}

.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name { bottom: -27px; width:190px; margin-left:-38px; } this is the final I want ... thanks u again

Collectives™ on Stack Overflow

Css hover change another element css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related