Hi everybody,
I would like to ask you a simple (I hope) thing. I am trying to create a mouseover effect on an image, where the opacity changes and a text comes out.
As I am not an expert I have tried several times, but unfortunately I just managed to have an opacity effect. Another problem is that I am using (unfortunately) google sites, and it looks like here it is not possible to use css, if not integrated in the html. Can anybody help me? Thanks
Here you can find a draft of the html code I use now, with working opacity mouseover effect. I am pretty sure it is also not so clean.
<a href="https://sites.google.com/a/dgsarkitekter.com/home/projects/europan-13">
<div style="overflow:hidden; float: left; margin-left: 5px; margin-bottom: 5px;">
<img data-load="false"
data-image-focal-point:"0.5,0.5"
data-image="https://4310b1a9-a-0000112b-s-sites.googlegroups.com/a/dgsarkitekter.com/home/sandnesss.png?attachauth=ANoY7cpZs6hYSBpachcbnUIO8u_os3MRlN2BwFEYKAXu840a0eq9qUQ- xUQziQWT4sohMPB0t0wGqrki3NP8JX8abCavfzpcuUjVxYlrmOeAUeYjmAWiuv0h_7mIlIc_4JUL39Jr
0xkNR76ZjQC4NjgWvNyt2x818bICaiPZdRMRMVWqWQu6Pgq6sXY97cc8neYVOAikAu2FKOEBCeHSh6Aw
3ppFY8JOKg%3D%3D&attredirects=0"
data-src="https://4310b1a9-a-0000112b-s-sites.googlegroups.com/a/dgsarkitekter.com/home/sandnesss.png?attachauth=ANoY7cpZs6hYSBpachcbnUIO8u_os3MRlN2BwFEYKAXu840a0eq9qUQ- xUQziQWT4sohMPB0t0wGqrki3NP8JX8abCavfzpcuUjVxYlrmOeAUeYjmAWiuv0h_7mIlIc_4JUL39Jr
0xkNR76ZjQC4NjgWvNyt2x818bICaiPZdRMRMVWqWQu6Pgq6sXY97cc8neYVOAikAu2FKOEBCeHSh6Aw
3ppFY8JOKg%3D%3D&attredirects=0"
style="width: 240px; height: 160px; margin: 5px;"
onmouseover="this.style.opacity=0.3;this.filters.alpha.opacity=30;"
onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100"
alt="img_001_2.jpg" src="https://4310b1a9-a-0000112b-s-sites.googlegroups.com/a/dgsarkitekter.com/home/europan.jpg?attachauth=ANoY7crdavH5c1rYnvCVZYwxKlmLL- ZTij0BdAEaO1QQBYd9_6nseWxaLguy3zDihZrD0jCBUTEjAeNJCA2_JpCZZxeyBW7FNnIsJazAFbj_Wa
oll2UAKRwaVCmXjujwYpwHtFKhhAA9PeNoy-6Bq_P_eUMJZ0h4Zfv-JmH5FIGLY7d4q93FZqb05pDk4naiZeKdJuhZviN5A88GanMfPDIDC38D0J9iCw%3D%3D&attredirects=0"
data-image-resolution="300w"
</img>
</a>
</div>
I would like to see the text appearing just in the picture, I will show you an example: http://www.effekt.dk/projects/
Basically something like this. The text should be the name of the project explained in the page where you go through the link incorporated in the image
Something like this?
Thank you so much, it looks great! I made small changes (like the text style). At the moment I have another problem, as it looks like the images fit the web page in a weird way, I am not even sure that I can explain it with a text. If I put more than an image, normally I should see a line with many images in a line, until they fit the web space. After that, they should start a new line. But in my case they move in order to start every time a new line, with only one image per line. Is it clear? I will copy here the code again:
<a href="https://sites.google.com/a/dgsarkitekter.com/home/projects/europan-13" style="position: relative;left: 5px; width: 240px; height: 160px;">
<div style="overflow:hidden; float: right; margin-left: 2px; margin-bottom: 5px;">
<img src="https://4310b1a9-a-0000112b-s-sites.googlegroups.com/a/dgsarkitekter.com/home/europan.jpg?attachauth=ANoY7crdavH5c1rYnvCVZYwxKlmLL- ZTij0BdAEaO1QQBYd9_6nseWxaLguy3zDihZrD0jCBUTEjAeNJCA2_JpCZZxeyBW7FNnIsJazAFbj_Wa
oll2UAKRwaVCmXjujwYpwHtFKhhAA9PeNoy-6Bq_P_eUMJZ0h4Zfv-JmH5FIGLY7d4q93FZqb05pDk4naiZeKdJuhZviN5A88GanMfPDIDC38D0J9iCw%3D%3D&attredirects=0" width="240" height="160" alt="image"
onmouseover="this.style.opacity='0.5';this.nextSibling.style.opacity='1.0'"
onmouseout="this.style.opacity='1';this.nextSibling.style.opacity='0'"><span style="position:absolute;bottom:20px;left:20px;color:#000;opacity:0;"><b>foto 1</b><BR><small>Orsta Europan</small></span></a>
Thank you again
sorry, actually I have solved that problem, but I really cannot fix the text in a specified position in the images. It looks like until now I have an absolute position relative to the entire page, and not to the single images. Do you have any solution? Thanks
You must have lost the position: relative you had for the link. That's what creates a context for the offset for the AP image.
Thank you again, it works very well now. But I still don't know how to work with the position of the text is appearing on mouseover. Now I have an absolute position, and of course now they are positioned in a fixed position in the page. I have tried some options, but I didn't manage to relate them with the images. Any suggestion? Thanks
Thank you everybody, I took out the div line and now it works perfectly!
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)