The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Opacity and text on mouseover
bucko
post 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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 11 2015, 08:05 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(bucko @ Jun 11 2015, 11:50 PM) *

I am trying to create a mouseover effect on an image, where the opacity changes and a text comes out.

Where in the HTML do you want the text to appear? Also, what is the purpose/importance of the text (an image caption)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bucko
post 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

QUOTE(Christian J @ Jun 12 2015, 03:05 AM) *

QUOTE(bucko @ Jun 11 2015, 11:50 PM) *

I am trying to create a mouseover effect on an image, where the opacity changes and a text comes out.

Where in the HTML do you want the text to appear? Also, what is the purpose/importance of the text (an image caption)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bucko
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bucko
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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;">
       ^^^^^^^^^^^^^^^^^^

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bucko
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 16 2015, 07:10 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(bucko @ Jun 16 2015, 12:20 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 16 2015, 07:17 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(bucko @ Jun 16 2015, 01:33 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bucko
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:16 PM