Opacity and text on mouseover |
Opacity and text on mouseover |
bucko |
Jun 11 2015, 04:50 PM
Post
#1
|
Group: Members Posts: 6 Joined: 11-June 15 Member No.: 22,709 |
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> |
Christian J |
Jun 11 2015, 08:05 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
|
bucko |
Jun 12 2015, 08:22 AM
Post
#3
|
Group: Members Posts: 6 Joined: 11-June 15 Member No.: 22,709 |
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 |
Christian J |
Jun 12 2015, 12:34 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
Something like this?
CODE <a href="" style="position: relative; width: 240px; height: 160px;"> <img src="dog.jpg" width="240" height="160" alt="" 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:0.5em;left:0;color:#000;opacity:0;">caption text1</span></a> Note that there must be no content between the IMG and SPAN elements (not even whitespace or a linebreak) for the this.nextSibling part to work. Also note that the SPAN text is not seen by the users unless they hover over the image, and will not be seen at all if javascript is disabled, so don't put anything important in there. |
bucko |
Jun 15 2015, 05:20 PM
Post
#5
|
Group: Members Posts: 6 Joined: 11-June 15 Member No.: 22,709 |
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 |
bucko |
Jun 15 2015, 06:56 PM
Post
#6
|
Group: Members Posts: 6 Joined: 11-June 15 Member No.: 22,709 |
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
|
pandy |
Jun 15 2015, 07:27 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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.
CODE <a href="https://sites.google.com/a/dgsarkitekter.com/home/projects/europan-13" style="position: relative;left: 5px; width: 240px; height: 160px;"> ^^^^^^^^^^^^^^^^^^ |
bucko |
Jun 16 2015, 06:33 AM
Post
#8
|
Group: Members Posts: 6 Joined: 11-June 15 Member No.: 22,709 |
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
|
Christian J |
Jun 16 2015, 07:10 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
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. <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;"> The start tag of the DIV element above is never closed, probably it should be removed. |
Christian J |
Jun 16 2015, 07:17 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
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 That's what pandy explained: by giving the parent A element "position:relative", it becomes the new offset (instead of the window) for the absolute positioned text. Possibly the stray DIV start tag messes things up. |
bucko |
Jun 17 2015, 10:20 AM
Post
#11
|
Group: Members Posts: 6 Joined: 11-June 15 Member No.: 22,709 |
Thank you everybody, I took out the div line and now it works perfectly!
|
Lo-Fi Version | Time is now: 28th March 2024 - 05:16 PM |