Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2015-09-22 21:30:15

Gewuerz
Member
Registered: 2012-10-04
Posts: 56

Nice roll-over Effect in Auto-Index/galleries on bongu.de

I have found these website: http://www.bongu.de/main/Kategorie/4/trockenfruchte.

The effect on the index-images are very nice.

Is a similar effect with TTG-plugins possible?

Thanks Wolfgang

Last edited by Gewuerz (2015-09-22 21:30:27)

Offline

#2 2015-09-22 21:53:55

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,522
Website

Re: Nice roll-over Effect in Auto-Index/galleries on bongu.de

Not as is. But if you're clever with javascript...perhaps.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#3 2015-09-25 15:13:09

Gewuerz
Member
Registered: 2012-10-04
Posts: 56

Re: Nice roll-over Effect in Auto-Index/galleries on bongu.de

Thanks. , unfortunately, I have no knowledge of Javascript.
Maybe somebody can help me?
The effect is so nice!

Thanks Wolfgang

Offline

#4 2015-09-25 16:42:31

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 5,082
Website

Re: Nice roll-over Effect in Auto-Index/galleries on bongu.de

Actually, something like this can be done purely in CSS. Spending more time on it, it could probably be made a little nicer, but I put this together in about 10 minutes.

    .background {
      background-image: url('images/DSCF0625.jpg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 320px;
      border: 1px solid #212121;
      width: 320px; height: 480px;
    }
    
    .content {
      background-color: #f5f5f5;
      box-sizing: border-box;
      font-size: 0.875em;
      opacity: 0;
      overflow: auto;
      padding: 18px 12px;
      width: auto; height: 100%;
    }
    
    .background, .content {
      transition-delay: 0;
      transition-duration: 350ms;
      transition-property: all;
      transition-timing-function: ease-in-out; 
    }
    
    .background:hover {
      background-size: 640px;
    }
    
    .content:hover {
      opacity: 1;
    }
    
    .content > *:first-child {
      margin-top: 0;
    }
    .content > *:last-child {
      margin-bottom: 0;
    }
<div class="background">
  <div class="content">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  </div>
</div>

Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

Board footer

Powered by FluxBB