http://codepen.io/jzhang172/pen/YXoWZa
$(function(){
$('.tint.first').on('click', function() {
$(this).toggleClass('clicked');
});
$('.tint.one').on('click', function() {
$(this).toggleClass('clicked');
});
$('.tint.two').on('click', function() {
$(this).toggleClass('clicked');
});
});/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
padding: 8rem 0 7rem;
text-align: center;
}
.section-heading,
.section-description {
margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
position: relative;
}
.phone {
position: relative;
max-width: 80%;
margin: 3rem auto -12rem;
}
.phone + .phone {
display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
padding-bottom: 5rem;
}
.value-multiplier {
margin-bottom: .5rem;
color: #11DFC7;
}
.value-heading {
margin-bottom: .3rem;
}
.value-description {
opacity: .8;
font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
}
.categories .section-description {
margin-bottom: 4rem;
}
/* Bigger than 550 */
@media (min-width: 550px) {
.section {
padding: 12rem 0 11rem;
}
.hero {
padding-bottom: 12rem;
text-align: left;
height: 165px;
}
.phone {
position: absolute;
top: -7rem;
right: 3rem;
max-height: 362px;
z-index: 3;
}
.phone + .phone {
top: -6rem;
display: block;
max-width: 73.8%;
right: 0;
z-index: 2;
max-height: 338px;
}
.hero-heading {
font-size: 3.0rem;
position:relative;
z-index:100;
color:black;
font-weight:600;
}
}
/* Bigger than 750 */
@media (min-width: 750px) {
.hero {
height: 190px;
}
.hero-heading {
font-size: 3.2rem; z-index:100;color:black;
}
.section {
padding: 14rem 0 15rem;
}
.hero {
padding: 16rem 0 14rem;
}
.section-description {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.phone {
top: -14rem;
right: 5rem;
max-height: 510px;
}
.phone + .phone {
top: -12rem;
max-height: 472px;
}
.categories {
padding: 15rem 0 8rem;
}
}
/* Bigger than 1000 */
@media (min-width: 1000px) {
.section {
padding: 20rem 0 19rem;
}
.hero {
padding: 22rem 0;
}
.hero-heading {
font-size: 4rem;
z-index:100;color:black;
}
.phone {
top: -16rem;
max-height: 615px;
}
.phone + .phone {
top: -14rem;
max-height: 570px;
}
}
/**********************************/
@media (max-width:1375px){
.container .row .one-half.column.phones{
}
}
.container .row .one-half.column.phones{
width:700px;
margin-left:350px;
margin-top:-100px;
}
/**********************************/
.tint.two{
position: absolute;
left:110px;
top: -250px;
z-index:1;
}
.tint{
position:relative;
width:500px;
height:400px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
overflow:hidden;
z-index:6;
}
.tint.first{
position:relative;
bottom:150px;
left:50px;
}
.tint img{
height:500px;
width:700px;
}
.tint:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint:hover:before,
{
background: none; transform:scale(1.0);
-ms-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-o-transform:scale(1.0);
}
.tint.first:hover img{
/* Making images appear bigger and transparent on mouseover */
cursor: pointer;
transform:translateX(-30px);
-webkit-transition: all 7s ease;
-moz-transition: all 7s ease;
-o-transition: all 7s ease;
transition: all 7s ease;
}
/*------------TINTS ON CLICK
-----------------------------------*/
.tint.first.clicked{
position:relative;
top:-250px;
left:-70%;
z-index:100;
box-shadow:none;
background:transparent;
width:140%;
height:140%;
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
-webkit-transition:1.5s;
}
.tint.first.clicked img{
width:100%;
height:100%;
}
.tint.first:hover.clicked img{
/* Making images appear bigger and transparent on mouseover */
transform:none;
}
/*************Background**/
.section.hero::after{
content: "";
background-image:url(../img/4.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
<div class="container">
<div class="row">
<div class="one-half column">
<h4 class="hero-heading">
Start enjoying your Photographs Now. From anywhere.
</h4>
<a class="button button-primary" href=""target="_blank">Try it</a>
</div>
<div class="one-half column phones">
<div class="tint first">
<img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
</div>
</div>
</div>
</div>
</div>For clarity, please open my codepen and follow these instructions:
1.) Hover over the picture and observe the translate hover effect and the tint on the picture vanishing. (Working as intended)
2.) Click the picture and do not move the mouse after clicking it, observe how the picture grows into the frame
3.) Re-click the picture or simply refresh the page to go back to its normal size and now click the picture and take your mouse immediately off the picture to anywhere other then the picture.
4.) Observe how the picture automatically transitions into the position without the growing.
Question: From what I can tell, this is because the ".tint.first:hover img" is still in effect and I'm guessing that if I could disable that when I click on the picture, it would be fine. How would I do this?
Also, if anyone could tell me how I could make the picture responsive, that'd be great. I'm concerned how position:relative, top, left etc. would look like on other windows.
