Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Selecting few elements on one hover

I need to select the image to zoom x1 in the box when i hover over it, as well as put in the layout, the bg thats aleady there.

Also when i hover, i need i so the price hovers over as well as the background iamge and zooms in, but i forgot the css tag and what they were called. 

<div class="menu-item col-md-4 col-sm-6 col-xs-12">
        <div class="menu-thumbnail">
            <img class="img-responsive" src="http://demo.templatepath.com/buffalo_html/images/menu/1.jpg">
            <div class="overlay">
                <div class="icons">
                    <a data-lightbox="print" href="images/menu/1.jpg"></a>
                    <i class="icon-plus"></i>
                </div>
            </div><!-- /overlay -->
        </div><!-- /menu-thumbnail -->
        <h4 class="menu-title">
            Roasted Bison Steak
            <span class="btn price pull-right">£14.99</span>
        </h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
        <a href="single-dish.php" class="btn btn-default more">more</a>
    </div><!-- /menu-item col-* -->

/*******************************

TEMPLATE: DISHES-MENU

*******************************/
.head-block {
    margin: 20px 0px 30px 0px;
    font-size:29px;
}
.head-block:after {
    border: 1px solid #f28b1c;
}
.head-block:after {
    bottom: 0px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 158px;
}

.menu-list{
   margin:100px 0;
}

.menu-title{
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 23px;
  line-height: 40px;
}
.menu-thumbnail {
    backface-visibility: hidden;
    position: relative;
    overflow: hidden;
    cursor: pointer;

}

.menu-item {
      z-index: 999999;
}
.more{
    border: solid 2px #f28b1c;
    background-color: #f28b1c;
    color:#FFF;
}
.more:hover{
    border: solid 2px #c6c6c6;
    color: #c6c6c6;
    background: transparent;
}
.price{
    border: solid 2px #c6c6c6;
    color: #c6c6c6;
    float: right;
    font-weight: 800;
}
.price:hover{
      background-color: #8b2b11;
      color: #FFF;
}
.menu-item:hover .overlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.65);
    height: 100%;
    width: 100%;
    z-index: 9999;
    bottom: 0;
    left: 0;
    opacity: 1;
    border-radius: 3px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transition: all 0.3s ease-in-out 0s;
    font-size: 20px;

}
.menu-item .menu-thumbnail .menu-item:hover img{
    transform: scale(1.5);
}
.menu-item .overlay{
    opacity: 0;
}
.foods p{
  color: #7C7C7C;
  line-height: 35px;
}

2 Answers

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

.yourids { zoom: 150%; //or zoom: 1; and from there you can go zoom: 1.3; }

Konrad Pilch
Konrad Pilch
2,435 Points

But how do i select it all? im about concatinating the tags e.g. img:hover & p = paragraphs red and image zooms x1

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

Oops ignore that, it's scale because you want on hover:

.yourimage:hover { transform: scale(1.1); //both will now zoom to sam scale on hover } .yourclass:hover ~ .yourPtag { //this means when hover image but change p tag to red not image. color: red; }