|
|
|
|
|
|
|
Poslao: 08 Apr 2015 23:16
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Ako mislis na zoom efekat kada predjes misem na sliku, to moze da se odradi i bez js/jquery.
|
|
|
|
|
|
|
Poslao: 08 Apr 2015 23:26
|
offline
- dejnik978
- Zaslužni građanin
- Pridružio: 25 Mar 2015
- Poruke: 548
|
Napisano: 08 Apr 2015 23:22
Ako moze uput, ne mora odgovor, da naucim.
Dopuna: 08 Apr 2015 23:26
Vidim ja na internetu ima dosta tutorijala, ali koji je najpravilniji nacin da se ovi efekti uklope sa bootstrap 3, vidim kad menjam boju za navigaciju nav preko css-a za bootstrap, svasta ima, pa nadjem resenje, nego mislim da je ovo sve nesto mesano pa da neucim pogresno.
|
|
|
|
|
|
|
Poslao: 08 Apr 2015 23:51
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Ovaj kod radi onajn hover efekat preko slike, a po potrebi moze i da ispisuje na slici. Nemoj tolko obracati paznju na kod, posto je za pocetnika malo komplikovan.
css:
.view {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background:#000;
text-align: center;
margin:0px;
}
.view .mask, .view .content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.mask a {
display: inline-block;
background: url(../images/play.png) no-repeat;
text-indent: -9999px;
width: 85px;
height: 85px;
top: 33.33%;
position: relative;
}
.view img {
display: block;
position: relative;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(234, 0, 255, 0.3);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask, .view-first:hover .mask-loupe {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
html:
<div class="view view-first">
<img src="img/mala-slika.jpg" alt="" class="img-responsive">
<div class="mask wrapper-parent">
<a href="img/velika-slika.jpg" class="img-responsive">Open</a>
</div>
</div>
|
|
|
|
|
|
|
|
