Hover with scale only in parent div

Question

Hover with scale only in parent div

Navigation

#1 by (2 votes)

0

I want to apply a div where I change the background to purple and the texts and image to white until there works normal the problem is that I wanted to apply a divs in the background that became purple with css more doing this it applies the effect of scale on the other elements and in this case wanted the effect of :hover to be only in the background. follow my code:

I'm using SASS attached an image to show the final result.

SASS

.box-courses{
    border: 2px solid $gray-light;
    padding: 15px 30px;
    @include transition(.5s);

    &:hover{
      @include gradient-bg(gradient);
      @include box-shadow(shadow);
      @include scale(1.1);
      border: none; 
      .title-course{
         @include scale(1);
        color: $white;
      }

      .icon-course{
         @include scale(1);
        background-image: url(../images/courses/html-hover.png);
      }

      .description{
         @include scale(1);
        color: $white;
      }
    }

    .title-course{
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      font-weight: bold;  
      color: $gray;
    }

    .icon-course{
      background-image: url(../images/courses/html.png);
      width: 52px;
      height: 57px;
    }

    .description{
      font-size: 13px;
    }
    .buttons{
      margin-top: 15px;
      li{
        .btn-custom{
          padding: 10px 15px;
        }
      }
    }
  }

HTML

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="box-courses">
                    <div class="row">
                        <div class="col-md-3 pull-right">
                            <div class="icon-course"></div>
                        </div>
                        <div class="col-md-9">
                            <h4 class="title-course">Curso de HTML5: Aprenda de maneira descomplicada.</h4>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </p>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <ul class="list-inline list-unstyled buttons">
                                <li><a href="#" class="btn-gradient btn-custom">Saiba mais</a></li>
                                <li><a href="#" class="btn-white btn-custom"><span>Comprar curso agora</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

the layout

MycodenoteherethatthefontandtheotherelementshaveincreasedandthisisnotwhatIwantIjustwanttoincreasethepurplebackground:

html sass hover

asked by anonymous 10.03.2018 / 18:50

1 answer

: owl-carousel first-child no .active does not work Change the properties of an SVG object with JS

score 2 · Accepted Answer

There is a technique that while you do Scale Up in the Father at the same time you do a Scale Down on the child . (I will not do with your SASS because I have no compiler). Ma follows a practical example.

This example can help you understand the concept of the technique.

.box-courses {
    background-color: red;
    width: 80%;
    transform: scale(1);
    transition: transform 0.5s linear;
    /* box-sizing: border-box; */
}
.box-courses:hover {
    transform: scale(1.1);
}
.box-courses .small{
    transform: scale(1);
    transition: transform 0.5s linear;
}
.box-courses:hover .small{
    transform: scale(0.9);
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="box-courses">
                <div class="small">
                    <h1>gdfg</h1>
                    <img src='http://placeskull.com/80/80' alt=''/>
                </div>
            </div>
        </div>
    </div>
</div>