CODEWITHSUNDEEP
css
C.Ham
C.Ham

Reputation: 25

Transform and Transition, what should I be targeting?

I was wondering if someone could help me out and explain what I can do to make this work. I am simply trying to make the div get slightly larger when the user hovers over the title of the panel. I have scaled down the panel successfully but I can't remove it when the mouse hovers over it.

I know this is probably very simple but I have been struggling for hours now.

I would be grateful if someone could help me out,
Thanks in advance.

.panel-default .panel-heading {
  color: #333;
  background-color: rgba(118, 130, 255, 0.7);
  border-radius: 0px;
  border: 1px solid grey;
  box-shadow: 3px 4px 10px grey;
  width: 75%;
  margin: auto auto;
  -webkit-transform: scale(.8, .8);
  transform: scale(.8, .8);
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel-default .panel-heading > a:hover > .panel-default .panel-heading,
.panel-default .panel-heading > a:focus > .panel-default .panel-heading {
  -webkit-transform: none;
  transform: none;
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
<div class="row">
  <div class="col-md-10 col-md-offset-1 text-center">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          <div class="panel-heading">
            <h4>Title of Panel</h4>
          </div>
        </a>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong > - 01/01/2001 </em>
          </div>
          <hr>
          <div class="panel-body">

          </div>

        </div>
      </div>
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          <div class="panel-heading">
            <h4>Title of Panel2</h4>
          </div>
        </a>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong> - 01/01/2001</em>
          </div>
          <hr>
          <div class="panel-body">

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

k.imgur.com/YL2mY.png

Upvotes: 0

Views: 47

Answers (2)

Banzay
Banzay

Reputation: 9470

I think you simply need to define style for .panel-default .panel-heading:hover instead of .panel-default .panel-heading > a:hover > .panel-default .panel-heading like this:

.panel-default .panel-heading:hover {
  -webkit-transform: none;
  transform: none;
}

In your style definition you try to define style for parent element of "hovered" tag a but it's impossible using CSS. So your rule for .panel-default .panel-heading > a:hover > .panel-default .panel-heading works for nothing

.panel-default .panel-heading {
  color: #333;
  background-color: rgba(118, 130, 255, 0.7);
  border-radius: 0px;
  border: 1px solid grey;
  box-shadow: 3px 4px 10px grey;
  width: 75%;
  margin: auto auto;
  -webkit-transform: scale(.8, .8);
  transform: scale(.8, .8);
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel-default .panel-heading:hover {
  -webkit-transform: none;
  transform: none;
 }
<div class="row">
  <div class="col-md-10 col-md-offset-1 text-center">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          <div class="panel-heading">
            <h4>Title of Panel</h4>
          </div>
        </a>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong > - 01/01/2001 </em>
          </div>
          <hr>
          <div class="panel-body">

          </div>

        </div>
      </div>
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          <div class="panel-heading">
            <h4>Title of Panel2</h4>
          </div>
        </a>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong> - 01/01/2001</em>
          </div>
          <hr>
          <div class="panel-body">

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

Upvotes: 1

zer00ne
zer00ne

Reputation: 43880

Here's how you use transition and transform, you'll have to play around with it so it behaves as you'd like.

.zoom h4 {
  line-height: 1.5;
  font-size:18px;
  transition: font-size .7s linear;
  transform: scale(1,1);
  transform-origin:0% 20%;
}
.zoom:hover h4 {
  font-size:22px;
  transition: all .7s linear;
  transform: scale(1.2,1.2);
  transform-origin:45% 20%;
  text-align: center;

}

SNIPPET

.panel-default .panel-heading {
  color: #333;
  background-color: rgba(118, 130, 255, 0.7);
  border-radius: 0px;
  border: 1px solid grey;
  box-shadow: 3px 4px 10px grey;
  width: 75%;
  margin: auto auto;
  -webkit-transform: scale(.8, .8);
  transform: scale(.8, .8);
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel-default .panel-heading > a:hover > .panel-default .panel-heading,
.panel-default .panel-heading > a:focus > .panel-default .panel-heading {
  -webkit-transform: none;
  transform: none;
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.zoom h4 {
  line-height: 1.5;
  font-size: 18px;
  transition: font-size .7s linear;
  transform: scale(1, 1);
  transform-origin: 0% 20%;
}
.zoom:hover h4 {
  font-size: 22px;
  transition: all .7s linear;
  transform: scale(1.2, 1.2);
  transform-origin: 45% 20%;
  text-align: center;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="row">
  <div class="col-md-10 col-md-offset-1 text-center">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          <div class="panel-heading zoom">
            <h4>Title of Panel</h4>
          </div>
        </a>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong > - 01/01/2001 </em>
          </div>
          <hr>
          <div class="panel-body">

          </div>

        </div>
      </div>
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          <div class="panel-heading zoom">
            <h4>Title of Panel2</h4>
          </div>
        </a>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong> - 01/01/2001</em>
          </div>
          <hr>
          <div class="panel-body">

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

Upvotes: 0

Related Questions