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; }
Related
Is there a way to make a text content popup box appear when mouse hovers some HTML element?
I need the overlay to fit its content, because the way it is now is cropping the text, it's getting the height of the HTML element and not the height of its content.
It only slides left, but that's okay with me. I am going to place the html element to the right of the page later on, but I need to be able to set a margin from the starting point of the popup, because it slides just next the HTML element, I'd like some space between.
This is what I have got so far:
.container {
position: absolute;
width: 40%;
}
.overlay {
position: absolute;
bottom: 0;
right: 100%;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: 0.5s ease;
}
.overlay:hover {
display: none;
}
.container:hover .overlay {
width: 100%;
right: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
My Text
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
How can I do that?
See if that's what you're wondering to happen :
#container {
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
}
.link {
position: relative;
display: inline-block;
}
.link .tip {
visibility: hidden;
width: 0;
height: 100px;
opacity: 0;
background-color: #008CBA;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
transition: 0.5s ease;
overflow: hidden;
margin-right: 20px;
}
.link:hover .tip {
visibility: visible;
width: 150px;
height: auto;
opacity: 1;
}
<div id="container">
<div class="link">Hover me now !
<span class="tip">
Some few text here<br><br>
Let's try something else<br><br>
And adding more info here too<br><br>
And even a bit more here also
</span>
</div>
</div>
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/
Here is my jsfiddle http://jsfiddle.net/6XdcY/4/.
I have the DIV which appears while hovering another DIV.
In containing div there is with display: block and 100% width and height.
This <A> interferes the div which should appear while hovering.
<div id='language'>
<a class='language' href='en'></a>
<a class='delete' href='' ></a>
</div>
#language {
width: 172px;
height: 218px;
opacity: 0.85;
margin: 2px;
z-index: 1;
float: left;
}
#language a.language {
width: 100%;
height: 100%;
display: block;
z-index: 2;
}
#language:hover {
width: 172px;
height: 218px;
opacity: 1;
cursor: pointer;
}
#language:hover .delete{
display: block;
}
.delete {
display: none;
width: 30px;
height: 30px;
background: #fff url(http://tyche.ge/palabra/images/delete_language.png);
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-left: 1px solid #88bde4;
border-bottom: 1px solid #88bde4;
margin-right: 1px;
margin-top: 1px;
top: 1;
right: 1;
float: right;
z-index: 999;
}
The delete button should be inside the containing div.
You'll understand better with jsfiddle.
Thanks in advance
Try adding this to the delete button:
position: relative;
top: -30px;
Live Demo
You can try this:
#language a.language {
display: block;
height: 83%; // reduce the height from 100%
width: 100%;
z-index: 2;
}
Or
Add two properties in .delete class, like this:
.delete
{
// other properties
position: relative;
top: -35px;
}
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
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.)