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.)
Related
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/
I have a div with a hamburger sign on, covered by another div. I want the burger sign to stack on top of everything. So I applied z-index values to the places I thought appropriate. However it doesn't work. Can anyone explain why? Here is my codepen below please take a look.
codepen:
http://codepen.io/tbeckett24/pen/qORBbE
html:
<body>
<div id="photoCover">
<nav id="menu" class="menu">
<span>Menu</span>
</nav>
</div><!--photoCover-->
<div id="entryMenu"></div><!--entryMenu-->
</body>
css:
html {
background: green;
width: 100%;
height:100%;
}
body {
width: 100%;
height:100%;
position: relative;
}
#photoCover {
width:100%;
height:100%;
position: fixed;
top: 0;
left:0;
background-color: rgba(0,0,0,0.6);
}
.menu {
position: fixed;
top: 0; right: 0;
width: 100%;
background-color: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
}
.menu-trigger {
position: fixed;
top: 2%; right: 2%;
display: block;
width: 60px; height: 60px;
cursor: pointer;
background: red;
z-index:3000;
}
.menu-trigger span {
position: absolute;
top: 50%; left: 0;
display: block;
width: 100%; height: 6px;
margin-top: -2px;
background-color: #fff;
font-size: 0px;
-webkit-touch-callout: none;
user-select: none;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
z-index: 2000;
}
.menu-trigger span:before,
.menu-trigger span:after {
position: absolute;
left: 0;
width: 100%; height: 100%;
background: #fff;
content: '';
}
.menu-trigger span:before {
-webkit-transform: translateY(-270%);
transform: translateY(-270%);
}
.menu-trigger span:after {
-webkit-transform: translateY(270%);
transform: translateY(270%);
}
#entryMenu {
position: fixed;
top:0;
left:0;
height:100%;
width:100%;
background-color: rgba(0,0,0,0.9);
}
By adding a z-index to the parent-div, I got the "hamburger" on the top layer.
#photoCover {
(...)
z-index:99;
}
I would believe that the reason why, is that both the #photoCover and the #entryMenu is fixed and in the same place, the #entryMenu is on top, because it is added last.
Add z-index: 1; for div with id=photoCover.
Add z-index to the wrapper div
#photoCover {
width:100%;
height:100%;
position: fixed;
top: 0;
left:0;
background-color: rgba(0,0,0,0.6);
z-index: 1;
}
Demo URL
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; }
I want to create a hover effect on an image that when hovered over multiple colored divs appear. I figure I can do this with CSS, but am having trouble getting the result I want.
What I am aiming for it to look like in the end:
HTML:
<div class="row thumbrow">
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-4 thumbgrid">
<li>
<div class="thumb">
{{ cms:page_file:thumb_one.image:image}}
<span class="center">{{ cms:page:thumb_one.text:string }}</span>
<div class="yellow">
</div>
</div>
</li>
</ul>
</div>
CSS:
.thumb {
display:inline-block;
position: relative;
height: 170px;
overflow: hidden;
}
.thumb:after {
background: rgba(255,255,255,.8);
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 .yellow {
content:'';
display: block;
height: 170px;
left: 0;
opacity: 1;
position: relative;
top: 0;
width: 100%;
z-index: 5;
background: #f9d33a;
}
span.center {
color: white;
position: relative;
top: -100px;
z-index: 3;
}
As comments, the essential part was the missing of css position:absolute for the elements .yellow and .center
I have run up a demo here
The use of the selectors :after are not necessary , in the demo the CSS has been shortened to :
.thumb {
display:inline-block;
position: relative;
height: 170px; width:100%;
overflow: hidden;
}
.thumb .yellow, .thumb .center { display:none; }
.thumb:hover .yellow {
content:'.'; display: block;
position: absolute; z-index: 1;
bottom:10px; left: 10px; right:10px; top: 10px;
background: #f9d33a; opacity: 0.5;
}
.thumb:hover .center {
display:block; color: white;
position: absolute; z-index: 2;
top: 20px; left: 20px; right: 20px; bottom:20px;
}
Some values ( like the top, bottom, left, right offsets I made up ), the key part is the position:absolute
You can use hover selectors along with sibling selectors to display on hover, similar to the suckerfish menu:
http://jsbin.com/qerucawe/3
http://jsbin.com/qerucawe/3/edit