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

Gewuerz · 2015-09-22 21:30:15

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)

rod barbee · 2015-09-22 21:53:55

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

Gewuerz · 2015-09-25 15:13:09

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

Thanks Wolfgang

Matthew · 2015-09-25 16:42:31

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>

Community @ The Turning Gate

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

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

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

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

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

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

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

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

Board footer