Hover effect of .box-panel

Hover-effect-of-.box-panel.markdown

Hover effect of .box-panel

Pure HTML5+CSS3 The example of changing the text color and background from grey to a black/white when hover. Also you can see the image rotation at the same time.

A Pen by htmlstrap on CodePen.

License.

index.html

<div class="panel box-panel img-opac text-justify scale1">
  <img class="pull-left img-position" src="http://lorempixel.com/200/300/people/9" alt="girl" />
  <h4>Nobis - non iusto!</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic tenetur labore magni temporibus, quibusdam, aliquid eos velit cupiditate repudiandae quis quisquam libero voluptatibus quo nobis voluptatum possimus nostrum provident! Placeat totam magnam asperiores, similique vitae doloribus aperiam omnis nulla corrupti architecto illum, sit enim voluptatem!</p>
  <p>Enim ratione, optio facere ab labore quas facilis placeat quam, aliquid porro sed sunt ipsa! Corporis possimus esse, incidunt iusto totam ab ea, illum ut expedita, tempora veritatis commodi illo architecto fugiat a cumque, magni omnis saepe quam asperiores impedit qui. Inventore at, libero nostrum.</p>
  <p>Rerum atque exercitationem quia, fugiat veniam accusamus at, eveniet, ex blanditiis a possimus officia. Ratione ullam obcaecati placeat voluptate accusantium cupiditate minus, aliquam debitis ad a possimus, quis. Est nemo voluptate nihil facilis dicta illum numquam quo non pariatur voluptatibus exercitationem, labore, at. Fuga, doloremque.</p>
</div>

style.css

 body {
  padding-top: 15px;
}
.panel {
  margin: 10px auto;
}
.panel > img {
    transition-duration: .9s;
}
img {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.img-opac {
    opacity: .7;
}
.img-opac:hover {
    opacity: 1;
}
.box-panel,
.img-panel {
    background-color: rgba(233, 233, 233, 0.7);
    color: #888;
    padding: 20px;
    transition-duration: .9s;
    width: 75%;
}
.box-panel {
    transition-duration: .9s;
}
.box-panel:hover {
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: #333;
    cursor: default;	
}
.box-panel:hover > img {
    transform: rotate(-5deg);
    transition-duration: .9s;
}
.box-panel,
.jumbo-panel,
.img-panel {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.img-position {
  margin-top: 20px;
}
.text-justify {
  text-align: justify;
}
h4, p {
  margin-left: 220px;
}
.pull-left {
  float: left;
}
.scale1 {
    transform: scale(1);
    transition-duration: 1.1s;
}
.scale1:hover {
    transform: scale(1.1);
    transition-duration: 1s;
}