Welcome, Guest. Please login or register.
Did you miss your activation email?

 
Advanced search

22646 Posts in 6673 Topics- by 17596 Members - Latest Member: permsk

22-10-2018 11:05:42
JOOM::GALLERY::FORUMJoomGallery 3.x JUXFrontendImage hove effects
Pages: [1]
Print
Author Topic: Image hove effects  (Read 1391 times)
0 Members and 1 Guest are viewing this topic.
komir
Newbie
*
Offline Offline

Posts: 30


View Profile
« on: 23-01-2015 13:46:24 »

Hi, I start to create mouse over image hover effect, using  this http://tympanus.net/Tutorials/OriginalHoverEffects/index.html DEMO 1.

In joomgallery.css I add
Code:
.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(219,127,8, 0.7);
   -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 {
   -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;
}

Problem is where is correct place, in default_images.php, to put code
Code:
<div class="mask">
                        <h2>Hover Style #1</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
So when user hover image get text?

When find correct place, next step is to put
Code:
<div class="jg_catelem_txt">
there to get info image on hover :)

Is anybody can give some solution or maybe suggest something?
Think there will be more then me who will use this in their galleries :)
Logged
Joshua
Sr. Member
****
Offline Offline

Posts: 359


Ready for Adventure


View Profile
« Reply #1 on: 24-11-2016 22:57:14 »

I've coded a working example on Ramin's Joomgallery. I did some minor tweaks which someone might find this useful:

<style>
  .jg_imgalign_gal, .jg_catelem_photo {
    border: 1px solid #cccccc;
    margin: 4px;
    padding: 4px 4px 0;
}

.jg_element_txt, .jg_catelem_txt {
    background: rgba(219, 127, 8, 0.7);
    left: 5px;
    margin: 0 4px;
    opacity: 0;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    bottom: 11px;
    width: calc(100% - 19px);
}

.jg_row .jg_element_gal, .jg_row .jg_element_cat {
   position: relative;
}

.jg_photo_container {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jg_element_txt a {color: #333 !important;}

.jg_element_gal:hover img, .jg_catelem_photo: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);
    opacity: 1;
}

.jg_element_gal:hover .jg_element_txt, .jg_element_cat:hover .jg_catelem_txt {
   opacity: 1;
}

.jg_catelem_photo, .jg_photo_container, .jg_topview a {
   overflow: hidden;
}
</style>


Some adjustments may be needed.
Logged
Pages: [1]
Print
Jump to:  

HOSTED BY SCHWARZKÜNSTLER ®

PROTECTED BY  ZB BLOCK  AND Project Honey Pot
Theme orange-lt created by panic

Bad Behavior has blocked 544 access attempts in the last 7 days.