I want to create a tooltip (using css) that appears once the user moves the mouse over an element. I made it work for text, but I have problems making it work for an image.
.container {
position: relative;
width: 15%;
}
.image {
position: relative;
display: inline-block;
width: 100%;
height: auto;
}
.image .tooltiptext2 {
visibility: hidden;
width: 150%;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -8px;
left: 110%;
font-size: 150%;
font-family: Arial;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.image .tooltiptext2::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.image:hover .tooltiptext2 {
visibility: visible;
opacity: 1;
}
You can see what I did in this link:
https://jsfiddle.net/Ruloco/q3e4psh3/
I'll apreciate any help you could give me. Thanks in advance!!
.tooltiptext2 is not a child of .image. Using .image + .tooltiptext2 instead of .image .tooltiptext2 makes the tooltip work.
https://jsfiddle.net/8Lmz2oLj/
The tooltip isn't a child of the image. You need to amend your styles so that the image container is the thing you're listening for a hover on.
.container:hover .tooltiptext2 {
visibility: visible;
opacity: 1;
}
https://jsfiddle.net/q3e4psh3/1/
Related
I'm having some trouble making my tooltip position center in mobile devices. It gets cut and end up in different places, depending on where the tooltip-icon is.
I wrote "position: center" which is obviously not working.
Please help me. :)
.tooltip {
position: relative;
display: inline-block;
border-bottom: none;
color: #516A66;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 400px !important;
background-color: #516A66;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 20px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -200px;
opacity: 0;
transition: opacity 1s;
}
#media only screen and (max-width: 767px){
.tooltip .tooltiptext {
position: center;
width: 200px !important;
}}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #516A66 transparent
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
I created a tooltip file
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
right: 0;
top: 110%;
z-index: 9999;
color: #ffffff;
background: #333333;
padding: 10px;
transition: all 0.5s ease;
}
[tooltip]:hover:before {
opacity: 1;
}
[tooltip] {
position: relative;
}
/* other stuff */
#container {
width: 150px;
height: 50px;
background: red;
}
<div id="container" tooltip="Tooltip">Div with tooltip</div>
It works really fine but when hovering over the tooltips position, the hover effect triggers too. The hover effect should just get triggered when hovering over the element the tooltip is attached to.
How can I make the tooltip only appear when hovering the element?
You can remove the pointer-events from the tooltip:
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
right: 0;
top: 110%;
z-index: 9999;
color: #ffffff;
background: #333333;
padding: 10px;
transition: all 0.5s ease;
pointer-events: none; /* add this */
}
[tooltip]:hover:before {
opacity: 1;
}
[tooltip] {
position: relative;
}
/* other stuff */
#container {
width: 150px;
height: 50px;
background: red;
}
<div id="container" tooltip="Tooltip">Div with tooltip</div>
Add pointer-events: none; to tooltip class.
It disables mouse events (clicking, dragging, hovering, etc.) on elements.
Hope this helps :)
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
right: 0;
top: 110%;
z-index: 9999;
color: #ffffff;
background: #333333;
padding: 10px;
transition: all 0.5s ease;
pointer-events:none;
}
[tooltip]:hover:before {
opacity: 1;
}
[tooltip] {
position: relative;
}
/* other stuff */
#container {
width: 150px;
height: 50px;
background: red;
}
<div id="container" tooltip="Tooltip">Div with tooltip</div>
Right now I'm doing this to animate an element background color.
<style>
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element div {
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover div {
top: 0px;
transition:top 0.5s ease;
}
</style>
<div class="container">
<div class="element">some text<div>some text</div></div>
</div>
JsFiddle demo.
Is there any "cleaner" way to have the same animation? Right now I'm duplicating my content to achieve this.
You can use pseudo elements for this, and not have to duplicate any content:
It's basically moving one pseudo from above the element, and bringing it down over the element on the hover
div {
position: relative;
display: inline-block;
overflow: hidden;
}
div:before,
div:after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div>Text? Why would you ever want text?</div>
If you want the text to 'move' as well, you can do something similar:
div {
position: relative;
display: inline-block;
overflow: hidden;
height:20px;
width:300px;
}
div:before,
div:after {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div data-text="Text? Why would you ever want text?"></div>
Note: canIuse suggests it is widely supported (bit I admit only tested in latest chrome, so only going by this for cross browser). However, This may affect SEO, and so I would be reluctant to use this in production.
If you just wanted the 'upper' element to flow over the top of the text (instead of 'lower' text scrolling as well), You could do:
div {
position: relative;
display: inline-block;
overflow: hidden;
height: 20px;
width: 300px;
background: red;
}
div:before {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
top: -100%;
background: green;
}
div:hover:before {
top: 0;
}
<div data-text="The text I always wanted">The text I always wanted</div>
You could do it with background-position
Set a linear-gradient to 50% of each of the background colors and set the background size to be 200% of the actual div.
Then animate it and move the background 100% up. Like this:
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #c00 50%, #0c0 50%);
}
.element:hover {
background-position: 0 -100%;
transition: background-position 1s;
}
<div class="container">
<div class="element">some text</div>
</div>
This cuts out the need for any duplicate content in either the css or the html.
Yes, you can use pseudo element :before and get the text with attribute like:
<div class="container">
<div class="element" data-text="some text">some text</div>
</div>
And css:
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element:before {
content: attr(data-text);
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover:before {
top: 0px;
transition:top 0.5s ease;
}
http://jsfiddle.net/Pik_at/g3Lxrou4/3/
just similar to jbutler483, but using just a single pseudo class. FIDDLE
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
transition: top 0.5s ease;
overflow: hidden;
}
.element:after {
position: absolute;
top: -60px;
content: 'some text';
font-size: 20px;
line-height: 20px;
left: 0;
display: inline-block;
background-color: #0c0;
transition: top 0.5s ease;
}
.element:hover:after {
top: 0px;
}
<div class="element">some text</div>
I have a few thumbnail images that on hover have a multi colored hover styling (looks like this, the yellow thumbnail is what it looks like when you hover over it)
The only problem is that I can't get the text inside to align vertically in the middle of the thumbnail without breaking something else. When I change .thumb to display: table; and .align-mid to display: table-cell; with vertical-align: middle; the text aligns to the middle but the background color becomes opaque. Looks like this:
I can't seem to figure out how to accomplish this.
HTML:
<div class="thumb" onclick="location.href='{{ cms:page:thumb_one.link:string }}'">
{{ cms:page_file:thumb_one.image:image}}
<div class="align-mid">
{{ cms:page:thumb_one.text:string }}<br>
{{ cms:page:thumb_one.description:string }}
</div>
<div class="yellow">
</div>
</div>
CSS:
.thumb {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
display:inline-block;
position: relative;
height: 170px;
width: 235px;
overflow: hidden;
}
.thumb:after {
background: rgba(255,255,255,.7);
content:'';
display: block;
height: 170px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.thumb:hover:after {
opacity: 1;
padding: 20px;
transition: opacity .4s;
}
.thumb:hover > .align-mid {
background-color: transparent;
color: white;
}
.thumb:hover {
cursor: pointer;
}
.thumb img {
height: 100%;
width: 100%;
}
.yellow {
opacity: 0;
}
.thumb:hover .yellow {
background: rgba(255,213,43,.8);
content:'';
display: block;
left: 13px;
right: 13px;
bottom: 13px;
top: 13px;
opacity: 1;
position: absolute;
transition: opacity .4s;
z-index: 2;
}
.align-mid {
background-color: rgba(0,0,0,.5);
color: rgb(255,213,43);
height: auto;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
top: -105px;
width: 100%;
z-index: 3;
}
It is obvious that when your wrapper have more than a child , and all children are viewed as table cells , in case you dont want them stacked vertically ( y-axis) , you have to assign absolute positioning to each , this way they gonna be stacked on top of each other ( z-axis)
so a simple solution will be:
.thumb img { height: 100%; width: 100%; position:absolute; }
Hello i am trying to create hover effect on img.
HTML
<div>
<img src="http://placehold.it/350x150"/>
<div class="link-cont">click here to see more info</div>
</div>
css
div {
width: 350px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
height: 100px;
opacity: 0;
transition: all 0.4s;
}
div:hover .link-cont {
opacity: 1;
bottom:-100px;
}
i need a something like this , when the user hover on it
but i am getting something like this
can someone help me to achieve what i am trying to do..
jsFid--> http://jsfiddle.net/Nnd7w/
You want like this, check DEMO http://jsfiddle.net/yeyene/Nnd7w/17/
div {
width: 350px;
font-size:12px;
position: relative;
}
div img{
padding:0 10px;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
width: 370px;
height: 210px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
bottom:-40px;
}
.link-cont a{
opacity: 0;
}
div:hover .link-cont a{
position: relative;
opacity: 1;
bottom:-175px;
left:10px;
background:#fff;
color:red;
text-decoration:none;
padding:0 10px;
}
Try this - and let me know if it works for you..
Fiddle
Just a few changes - Could use some cleaning up.
div {
position: relative;
top: 50px;
background-color: blue;
width: 350px;
height: 150px;
margin: auto;
}
.link-cont {
background: red;
position: relative;
left: -50px;
top: -200px;
width: 450px;
height: 250px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div a {
position: relative;
top: 210px;
left: 50px;
opacity: 0;
}
div:hover .link-cont {
opacity: 1;
}
a {
text-decoration: none;
color: #fff;
}
div:hover a {
opacity: 1;
}
Made a few modifications to you CSS
div {
width: 370px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
top: 0;
width: 370px;
height: 200px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
}
div:hover img {
margin-left: 10px;
margin-top: 10px;
}
.link {
display: block;
margin-top: 170px;
margin-left: 50px;
}
Instead of playing with bottom property, I just changed opacity. I also assigned a class to anchor tag to make it display under the image. Also, you can see I have given some margin to the image to make it center and changed the width and height of your link-count div.
See Fiddle
I just changed bottom:-100px; to top: 160px; and it works fine!
Fiddle
Edit: Some more options because I don't understand:
Fiddle, and the one I think you want: Fiddle (that one's messy, but the hover only activates if you actually hover on the image.)