Tweet
Salut tout le monde,
Je suis en train de monter un site pour un client. J'ai intégré dans un article des miniatures histoire d'avoir un joli effet de zoom, sauf que ce joli effet ne marche que sur ordinateurs (PC & Mac, testé) et Android. (j'ai pas testé pour les autres, type Windows Mobile).
Certaines fonctionnalités ne sont visiblement pas gérées par iOS (ou le navigateur de ces terminaux)...
Quand on maintien le doigt sur la minaiture (iPhone, iPad), on a l'option d'enregistrement de l'image sur le mobile.
Du coup, l'effet n'est pas actif...
Voici le lien
HTML :
CSS :
Une idée ?
Merci !
Je suis en train de monter un site pour un client. J'ai intégré dans un article des miniatures histoire d'avoir un joli effet de zoom, sauf que ce joli effet ne marche que sur ordinateurs (PC & Mac, testé) et Android. (j'ai pas testé pour les autres, type Windows Mobile).
Certaines fonctionnalités ne sont visiblement pas gérées par iOS (ou le navigateur de ces terminaux)...
Quand on maintien le doigt sur la minaiture (iPhone, iPad), on a l'option d'enregistrement de l'image sur le mobile.
Du coup, l'effet n'est pas actif...
Voici le lien
HTML :
Code:
<div class="main"> <div class="view view-tenth"><img src="/images/lacarte/soupe.jpg" alt="" /> <div class="mask"> <h2>Soupe Miso Maison</h2> <p>Hana Katsuo (Dashi naturel), légumes de saisons, tofu.</p> <h3>3,40€</h3> </div> </div>
Code:
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(53, 53, 53, 1);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info,.view-tenth:hover h3 {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view {
max-width: 186px;
height: 279px;
margin: 12px;
float: left;
border: 8px solid rgba(30, 30, 30, 1);
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: url('../images/bgimg.jpg') no-repeat scroll center center #FFF;
color:transparent;
}
.view .mask,.view .content {
width: 186px;
height: 279px;
position: absolute;
overflow: hidden;
top: 0px;
left: 0px;
}
.view img {
display: block;
position: relative;
}
.view h2,.view h3 {
font-family: "Open Sans Condensed",serif;
text-transform: uppercase;
color: #FFF;
text-shadow: none;
border: medium none;
text-align: center;
position: relative;
font-size: 25px;
font-weight: 300;
letter-spacing: 1px;
padding: 35px 5px 0px;
background: none repeat scroll 0% 0% transparent;
margin: 10px 0px 0px;
line-height: 100%;
}
.view h3 {
font-size: 28px;
margin: -24px 0px 0px;
font-weight: lighter;
font-family: "Open Sans condensed";
text-shadow:1px 1px 1px black;
}
.view p {
font-family: "Open Sans condensed",serif;
font-style: italic;
font-size: 16px;
position: relative;
color: #D5D5D5;
padding: 8px;
text-align: center;
line-height: 115%;
}
.info {margin-top: 0;}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 2px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
Merci !
Commentaire