0
http://codepen.io/jzhang172/pen/YXoWZaJQuery отключить парения эффект OnClick
$(function(){
$('.tint.first').on('click', function() {
\t $(this).toggleClass('clicked');
});
$('.tint.one').on('click', function() {
\t $(this).toggleClass('clicked');
});
$('.tint.two').on('click', function() {
\t $(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>Для ясности, пожалуйста, откройте мой codepen и следуйте этим инструкциям:
1.) наведите курсор мыши на картинке и наблюдать перевод зависать эффект и оттенок на изображении исчезают. (Работа по назначению)
2.) Нажмите на картинку, и не перемещайте мышь после щелчка, наблюдать, как картина перерастает в кадре
3.) Повторно нажмите на картинку или просто обновить страницу чтобы вернуться к нормальному размеру и теперь щелкните изображение и сразу же выведите мышь из картинки в другое место, кроме изображения.
4.) Наблюдайте за тем, как изображение автоматически переходит в положение без роста.
Вопрос: Из того, что я могу сказать, это потому, будь умницей. Как мне это сделать?
Кроме того, если бы кто-нибудь мог сказать мне, как я мог бы сделать картинку отзывчивой, это было бы здорово. Меня беспокоит, как позиция: относительная, верхняя, левая и т. Д. Будет выглядеть в других окнах.
Спасибо, хотел рабочий ответ, но я понял это из ваших объяснений, спасибо. – Snorlax