Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Rollover Effect in the new Visual Index

 

Indexhibit version: 2.0
Thread is resolved.

iamanthonio
NETHERLANDS
2 year(s) ago
Permalink Post

Hello, i was wondering if it was possible to create a "rollover effect" like this site:
Example

This is my website:
Portfolio

I hope you can help me out!

Thanks

iamanthonio
NETHERLANDS
2 year(s) ago
Permalink Post

The links that i posted don't work...

Example: stefancoisson.com
My site: iamanthonio.com

Best Answer!
LouiseR
SWITZERLAND
2 year(s) ago
Permalink Post

Hello

No guarantee, but you can try to add those lines to your style.css:

  1. .picture {background:#13c97e; } /* the colour you want */
  2. a img:hover {opacity:.60; filter:alpha(opacity=60); }
  3. .top a img:hover {opacity:1;}
iamanthonio
NETHERLANDS
2 year(s) ago
Permalink Post

Thanks A lot, this works great! Any idea how i could make al the images black and white with roll over?

LouiseR
SWITZERLAND
2 year(s) ago
Permalink Post

It's a bit more complicated. But you can achive that using sprites or HTML5+JQuery.
You can have a look at those links for more informations:
dauidusdesign.com/css-image-sprites/
webdesignerwall.com/tutorials/…

But maybe somebody knows a better/simpler way to do it?

nilssanders
GERMANY
2 year(s) ago
Permalink Post

I have a 5px margin bottom with the background color and no idea where it comes from. my images are 5px smaler than the picture container. any idea?

LouiseR
SWITZERLAND
2 year(s) ago
Permalink Post

If the class .picture isn't used somewhere else (I didn't check everywhere), you can just add this:

  1. .picture {background:#13c97e; height: 127px; }/* the colour you want and the height of your image*/
monded
MACAO
2 year(s) ago
Permalink Post

any idea of rollover effect with text in center overlay on the pic?

pablosanruiz
SPAIN
2 year(s) ago
Permalink Post

Hi, I found a way of getting the caption centered on the pic, when hovering. You need to edit the last lines of format.visual_index.php

simply add this in the .captioning class

{ position: relative; z-index:-1; }

and in the .captioning .title

{ position: relative; z-index:-1; margin-top: -110px; }

Tristanh
IRELAND
2 year(s) ago
Permalink Post

Hey,
I wanted to change the opacity as detailed above in LouiseR's post - where do I add that code? In the style.css? If so, can you advise where in it its written?

Or is it in the VI plugin sheet?
Thanks!

Tristanh
IRELAND
2 year(s) ago
Permalink Post

Got it now thanks!!
Tris

BS6_Photography
UNITED KINGDOM
11 month(s) ago
Permalink Post

Hi, does anyone know how I would stop this roll over effect happening on other images on the same page the format is used, for example my logo is effected only on my home page as I am using the Visual Index format with the roll over effect added????

Cheers

jimmyimage.co.uk

Best Answer!
arsondpi
GREECE
11 month(s) ago
Permalink Post

Edit

  1. a img:hover {opacity:.50; filter:alpha(opacity=50); } 

into

  1. #img-container a img:hover {opacity:.50; filter:alpha(opacity=50); } 
BS6_Photography
UNITED KINGDOM
11 month(s) ago
Permalink Post

I thank you again!! :)

Showing 1 - 14 of 14 posts in Forum » Customize » Rollover Effect in the new Visual Index
 

This thread has been closed, thank you.