Transform scale div when hover on another

Question

I want to transform scale my div with text when user hover button, cant figure out how to do it... Ive tried many operators > ~ + - with no luck.

section {
 background: #000;
 color:#fff;
 height: 1000px;
 padding: 150px 0;
 font-family: Roboto;
}
section h1 {
  color: #fff;
  width:250px;
  font-size: 36px;
  padding: 10px 20px;
  font-weight:500;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #fff 50%);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
section:hover h1 {
  background-position: -100% 0;
  color: #2ecc71;
  width:250px;
  padding: 10px 20px;
}
#aboutUs .description {
  z-index: 999;
}
#aboutUs .desc {
 margin-top: 150px;
 font-size: 16px;
 line-height: 1.8em;
 letter-spacing: 1.2px;
 text-align: justify;
 color: #fff;
 border: 2px solid rgba(255, 255, 255, .8);
 padding: 20px 30px;
 margin-left: 40px;
 font-weight: normal;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
 z-index: 999;
}
#aboutUs .desc b {
 background: #2ecc71;
 color: #fff;
 padding: 5px;
 font-weight: normal;
}
#aboutUs .desc:hover {
 transform: scale(1.05);
}
#aboutUs a.btn-outline {
  margin-top: 40px;
  letter-spacing: 1.2px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 0px;
  padding: 20px 30px;
  font-size: 16px;
  color: #fff;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #fff 50%);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
#aboutUs a.btn-outline:hover {
  background-position: -100% 0;
  color: #000;
}
// Here i try to add style when user hover on button
#aboutUs a.btn-outline:hover + #aboutUs .desc {
  transform: scale(1.05);
}
#aboutUs .aboutUsfoto {
 background-image: url(https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg);
 border-bottom: 5px solid #fff;
 height: 80%;
 background-position: center;
 background-size: 100% 100%;
 overflow: hidden;
 background-size: cover;
 line-height: 600px;
 text-align: center;
 width: 60vw;
 margin-left: -280px;
 right:0;
 position:absolute;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
 opacity: .4;
 z-index: 1;
}
#aboutUs .aboutUsfoto h2 {
  font-size: 200px;
  opacity: .1;
  bottom: 0;
  position: absolute;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="aboutUs">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>O nas</h1>

      </div>
      <div class="col-md-7 description">
        <!-- I want this div to scale -->
        <p id="text" class="desc wow bounceInLeft" data-wow-delay=".5s" data-wow-duration="1.2s">
          Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, <b>quis nostrud exercitation</b> ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum <b>dolore eu fugiat</b> nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in <b>culpa qui officia</b> deserunt mollit anim id est laborum.
        </p>
        <!-- When user hover this button -->
        <a id="more" href="#" class="btn btn-outline pull-right text-center wow bounceInLeft" data-wow-delay=".9s" data-wow-duration="1.2s">Czytaj więcej</a>
      </div>
      <div class="hidden-sm">
        <div class="aboutUsfoto wow bounceInRight" data-wow-delay=".2s" data-wow-duration="1.2s">
          <h2>O NAS</h2>
        </div>
      </div>
    </div>
  </div>
</section>

Here is JSFiddle https://jsfiddle.net/mtf5k7wt/

You are not very clear which element is hovered and which element do you want to transform — Pete, Sep 12 '16 at 11:10
I want transform div with class '.text' when hover class 'a.btn-outline' — kuchar, Sep 12 '16 at 11:16
You can't do that with CSS as there is no "[**previous sibling selector**](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — Paulie_D, Sep 12 '16 at 11:17
Yeah it should be minimal but what if some style that i have there make this isue? — kuchar, Sep 12 '16 at 11:17
Create a code snippet that is associated just with your problem. Ideally a fiddle as well. And comments on which elements should do what. You think it's a good question, if others have to dig through your code? p.s. - i'm not the downvoter. — Mike B, Sep 12 '16 at 11:29

kuchar · Accepted Answer · 2016-09-12T12:09:04.223

1

Ok ive done it with simple jquery function... I think there is no way to make it with CSS only.

  $('#more').hover(
    function(){
      var $this = $('#text');
      $this.data('transform', $this.css('transform')).css('transform', 'scale(1.05)');
    },
    function(){
      var $this = $('#text');
      $this.css('transform', $this.data('transform'));
    }
  );

edited Sep 12 '16 at 12:09

answered Sep 12 '16 at 11:44

kuchar

607
1
8
23

Transform scale div when hover on another

1 Answers1