Viewing Hover over an Image

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Hover over an Image



User: Les C. 10 years ago
Is it possible to have an image and set the Mouse Over option to show a text box without the image?

Thanks.


LC
User: wellnl 10 years ago
Hi Les, I think the only way to do this is to create your text as an image file and make sure that it is the same size as the image. In Shape Options, the image is normal, and the mouse over would be your text converted to an image file. I can't see a way to directly replace an image with a text box for a mouse over unless you code it... Hope that helps,

Simon
User: Roddy 10 years ago
Text on hover usually uses a tooltip like this example.

You could use an image like Simon has suggested and use the Image Cross Fade on Mouseover widget.

Obviously it would be netter to have text rather than an image. This could be created the same way as the above widget. Layer an image on top of a div with the text and set the image hover opacity to zero.

Unless you have created a version of your website specifically for tablet devices you should avoid all hovers including text hyperlinks.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 10 years ago
--Simon,

Thanks for the reply and option. Unfortunately, creating an image looses definition to the text.

I ended up coding it.


LC
User: Les C. 10 years ago
--Roddy,

I have some of your widgets. In this case, I needed the ability to adjust the note size and make adjustments to both transparency and fade.


LC
User: Roddy 10 years ago
As I pointed out in your post in Bugs, the CSS you are trying to use is not correct in many ways. Even if it was compliant, it seems a very complicated way to achieve something fairly simple.

In this demo I have used a relatively positioned div. Inside that is another div witht a border and a paragraph. This is overlaid by an image whose opacity changes to zero on hover to reveal the text. I have added an ease-in-out transition and you can change the timing to suit.

The HTML to be pasted into a snippet is...

<div id="cf">
<div id="tc"><p>This is the text content</p></div>
<img class="top" src="image-file-name.jpg" />
</div>

The internal styles to paste into the Head Code box are...

<style type="text/css">
#cf {position:relative;width:640px;height:480px;margin:0;padding:0}
#cf p{position:relative;top:50%;font:15px Verdana, sans-serif;color:#000;margin:0;padding:5px;text-align:center}
#tc{box-sizing:border-box;width:640px;height:480px;position:absolute;border:10px solid #000}
#cf img.top {width:100%;height:auto;margin:0;padding:0;border:none;position:absolute;left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;}
#cf img.top:hover{opacity:0;}
</style>

Its been a long day here in Scotland and I'm tired so there may be a better way!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 10 years ago
--Roddy (now the understanding behind the Tartan plaid :),

Thanks for the cleaner text. It works fine with the exception of one item: the centering of paragraph text.

Your version works fine for a single line of text—but I need it for multiple lines.

Using your code as a template, here is what I came up with:


CSS


<style type="text/css">
#cf {
position:relative;
width:150px;
height:200px;
margin:0;
padding:0;
background:#0FB1FF
}
#cf p {
position:relative;
top:50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font:14px Helvetica-Condensed-Light, sans-serif;
color:#FFFFFF;
margin:0;
padding:0px;
text-align:left
}
#tc {
box-sizing:border-box;
width:150px;
height:200px;
position:absolute;
border:10px solid #0FB1FF
}
#cf img.top {
width:100%;
height:auto;
margin:0;
padding:0;
border:none;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out
}
#cf img.top:hover{opacity:0.1}
</style>

Last edit 10 years ago
User: Roddy 10 years ago
I put this into the <p> styles...

position:relative;
top:50%;

to center the text.

Remove it, align the text left, add some padding as required and type your text.

No need for the CSS transforms. Less code is better.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 10 years ago
-Roddy,

When I say centering of text, I mean that the entire text is centered (top/bottom) in the box—not that it starts in the center of the box and extends down.

The only way I have found to achieve this is to add the extra code. If there is a better way, more economical way, I would welcome it.


LC

Last edit 10 years ago
User: Roddy 10 years ago
I have updated the code. Hover the image in the DEMO to see it.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Les C. 10 years ago
--Roddy,

Many thanks!


LC


Post Reply
You must login or signup to post.