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.
Created
November 12, 2014 18:18
-
-
Save htmlstrap/b7241a48170541e4811d to your computer and use it in GitHub Desktop.
A Pen by htmlstrap.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="panel box-panel img-opac text-justify"> | |
<img class="pull-left img-position" src="http://lorempixel.com/200/250/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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} | |
.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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment