I am trying to have a div where on hover the image fades out (so you can only see the gray background behind) and some text fades in. I have been trying to do this using CSS transitions, however the opacity does not seem to change (i.e. I can still see the background image).
HTML:
<div id='options'>
<div class='option'>
<div class='back-option'>
</div>
<div class='front-option'>
Add post
</div>
</div>
</div>
CSS:
#options {
font-family: 'Segoe UI', 'Arial', sans-serif;
}
.option {
position: relative;
width: 6.25em;
height: 6.25em;
border-radius: 5px;
cursor: pointer;
background-color: #363636;
}
.back-option {
position: absolute;
width: 6.25em;
height: 6.25em;
border-radius: 5px;
background-image: url(http://png-5.findicons.com/files/icons/2672/pixel_ui/16/add.png);
background-size: contain;
-webkit-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
opacity: 1;
transition: opacity 0.5s;
}
.back-option:hover {
opacity: 0;
}
.front-option {
position: absolute;
width: 6.25em;
height: 6.25em;
border-radius: 5px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
line-height: 6.25em;
opacity: 0;
transition: opacity 0.5s;
}
.front-option:hover {
opacity: 1;
}
Here is a JSBin of it.
The hover isn't triggering because of the div placed over the top. I've simply modified the css to detect the hover on its parent instead.
.option:hover .back-option {
opacity: 0;
}
Live example: http://jsbin.com/cucadami/4/edit
.back-option doesn't get the event mouseover , cause another element is over it.
do
#options:hover .back-option {
opacity: 0;
}
and it will work.
you could as well give a background-color to .front-option, wich stands on top, and drop hover rules for .back-option
Related
I have the following code with the goal to display a name without hovering centered in the shape, then after hovering having a bio of 5 lines all centered with minimal spacing between line breaks.
The problem in my code currently is formatting the front-side to be all centered and have the same big font as the after-hover, and even more notably wrong- the info on the back is coming off the end of the shape. Not centered.
<html>
<div id="box">
John Doe
<div id="overlay">
<span id="plus">Title:<br>DOB:<br>Hometown:<br>Info4:<br>Info5:</span>
</div>
</div>
<style>
body {
background: -1;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background-size: cover;
border-radius: 5px;
overflow: hidden;
/* NEW */
line-height: 200px;
text-align: center;
position: relative;
}
#overlay {
background: rgba(0, 0, 0, 0.75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
/* NEW */
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, 0.85);
font-size: 24px;
}
</style>
</html>
This isn't an answer to all of your questions, but to get the font styles to be the same, add the font styling that you have for #plus to the #box selector instead. You will have to change the color for the box selector to black and for #plus you can leave what you currently have for the color.
I have created a button in html/less and when you hover over the button, the button will become bigger. At the moment it's very sloppy. Right when you hover over the button it gets to the bigger size, but I want it to be slower and have an animation kinda look.
Here is my code for the button in HTML and LESS:
HTML:
<div id="buttons">
dance
</div>
CSS
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
padding: 20px 60px;
}
So how can I get my button become bigger slower and have a kinda animation look?
Simply use transition for the element which you want to make effect on it, also if you want to scale it you can use transform: scale() with perspective(10px) to prevent the blurry effect on :hover event https://jsfiddle.net/7tvvmrcf/
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
transition: all 1s ease;
transform: scale(1);
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
transform: scale(1.5) perspective(1px)
}
<div id="buttons">
dance
</div>
You can use scaling for this. Put transition: all .5s ease-in-out; in the .green css for the slow animation and put transform: scale(1.1); in the .green:hover css for resizing the button. It will look like this:
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
padding: 20px 60px;
transform: scale(1.1);
}
<div id="buttons">
Dance
</div>
This is kind of a hack where when you hover over the button, and it gets bigger or smaller without transition:
.wallpaper{
height: 200px;
width: 200px;
background-color:#F5F5F5
}
.smileyStyle{
height: 50px;
width: 50px;
border-radius: 50%;
margin-left: 10px;
border: 3px solid #F5F5F5;
}
.smileyStyle:hover{
border: none;
}
<div class="wallpaper">
<button class="smileyStyle"> :)</button>
</div>
Based on your existing code and the information you give, it looks like simply adding transition: transform,padding .5s; to your .btn selector would do the job.
I usually prefer to be specific about the properties that will be taken into account by the transition to avoid changing something unwanted because of the cascade.
.btn {
[…]
transition: transform, padding .5s;
}
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
transition: transform, padding .5s;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
padding: 20px 60px;
}
<div id="buttons">
dance
</div>
I've created div element, and I also added a border-radius attribute to make the div more aesthetically pleasing. I also added a -webkit-transition: opacity .25s ease attribute to the div to create a transition to a dark overlay when the user hovers over the div. Then, I run into a problem which can be explained by these images.
Cursor outside the div element:
Moving the cursor inside the div element:
The cursor is fully inside the div element:
So, I guess this is a problem with the transition and it's caused by the rounded border of the image. It's kind of annoying and I'd like to remove it but I don't know how to. I've attached the code here:
Note: .memX (where X is a number) refers to each div element. There are like 10 .mem elements.
mem1, .mem2, .mem3, .mem4, .mem5, .mem6, .mem7, .mem8, .mem9, .mem10 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
overflow: hidden;
}
.overlay {
background: rgba(0,0,0,.4);
text-align: center;
height: 100px;
width: 100%;
padding: 45px 0px 66px 0px;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.insidetext {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
font-weight: lighter;
color: rgba(255,255,255,.85);
font-size: 1.5em;
margin-top: 35px;
}
.mem1:hover .overlay, .mem2:hover .overlay, .mem3:hover .overlay, .mem4:hover .overlay, .mem5:hover .overlay, .mem6:hover .overlay, .mem7:hover .overlay, .mem8:hover .overlay, .mem9:hover .overlay {
border-radius: 10px;
opacity: 1;
}
.mem1 {
background-image: url(members/giles.png);
}
This seems to be a problem in general. You can see this particular problem in action on this CodePen: http://codepen.io/ianfarb/pen/ikeAf
Try using this..
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
position: relative;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
/*padding: 45px 0 66px 0;*/
display: table;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
display: table-cell;
vertical-align: middle;
}
http://codepen.io/anon/pen/VLBqvE
Hmm I'm confused as to why you've got so many mem classes. Class names can be reused, ID selectors cannot. So why have .mem1 and so on when you could simply have .mem?
Anyway, to fix your problem all you need to do is add border-radius:5px; to #overlay and that should give you your desired effect.
I your example you have two div one is parent (box) and another is chilled(overlay) and you apply border to parent and your hover effect is on chilled so when you hover it will apply transition on chilled. and chilled has no border-radius: 5px; so apply border-radius: 5px; to your chilled id also. so i think its an overflow issue
But you can try this soluttion:
solution is remove delay from transition then it works because of delay it will give you problem.
See this example for removed delay from transition :http://jsfiddle.net/9phk87x8/ i think it will work for you.
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity ease;
-moz-transition: opacity ease;
}
I've created a div that contains a box, within that box is text and a link. What I want is when a person hovers over this box with the link, a red line appears on the bottom of the box. At the moment I've managed this but I want the red line to be the width of the grey box and only 5 pixels in height.
#teamspeak_box {
width: 159px;
height: 43px;
background: #212121;
bottom: 82px;
right: 76px;
position: absolute;
border-radius: 0px 0px 5px 5px;
}
#teamspeak_box_2 {
width: 43px;
height: 43px;
background: #313131;
bottom: 82px;
right: 191px;
position: absolute;
border-radius: 0px 0px 0px 5px;
}
#teamspeak_text {
color: white;
bottom: 93px;
right: 66px;
position: absolute;
}
#teamspeak_image {
bottom: 80px;
right: 104px;
position: absolute;
}
#teamspeak_image a:hover {
background-color: #C62828;
transition: all 0.5s ease;
}
<div id="teamspeak_box"></div>
<div id="teamspeak_box_2">
</div>
<div id="teamspeak_text">
<p>TEAMSPEAK
<P/>
</div>
<div id="teamspeak_image">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
</a>
</div>
I find your element positioning insane. Try this one
HTML
<a href="ts3server://craft412.serveminecraft.net:9987">
<div class="teamspeak-box">
<div class="teamspeak-icon">
<img src="http://filepic.ru/file/1436899103.png" alt="">
</div>
<p>TEAMSPEAK</p>
</div>
</a>
CSS
.teamspeak-box{
width: 159px;
height: 43px;
background: #212121;
border-radius: 0px 0px 5px 5px;
overflow: hidden;
color: white;
display: table;
}
.teamspeak-icon{
width: 43px;
height: 43px;
background: #313131;
display: table-cell;
transition: all 0.5s ease;
}
.teamspeak-icon img{
width: 100%;
}
.teamspeak-box p{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.teamspeak-box:hover .teamspeak-icon{
-webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
-moz-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
}
Run this code on JSFiddle
Basically you want to change the styling on one element while hovering another. This can be done the following way:
#teamspeak_image a:hover ~ #teamspeak_box {
background-color: #C62828;
transition: all 0.5s ease;
}
See this answer for more info. And you might consider adding a border-bottom: 5px solid red; to the box instead of background-color.
In order for the red line to be the width of the grey box and 5px tall,
use the css property to set the display of the grey box to block. Thus, for the grey box use:
display:block;
height:5px;
After that you can set other css properties for the links inside the grey box.
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 9 years ago.
So I have a div with an opacity set with a background image. I want the text that pops up when hovering the div to stay 100%. Could anyone possibly help me with this? Any help would be greatly appreciated!
DEMO
<body>
<div id="container">
<div id="container_inner">
<div id="container_txt">
<p>WORLD OF WARCRAFT</p>
<p id="p_txt">This is a simple World of Warcraft styled div that has been done implementing html, css, and css3</p>
</div>
</div>
</div>
</body>
What I fiddled upon and came on conclusion though is this is what you need I think.
Below is CSS that you have to use.
Fiddle: Click HERE
Demo (Transparent background)
html, body {
margin: 0;
height: 100%;
background-color: #575980;
}
#container {
width: 200px;
height: 300px;
cursor: pointer;
overflow: hidden;
margin: 100px auto;
border: 1px solid #333;
background-color: #000;
box-shadow: 0px 2px 8px #111;
}
#container_inner {
opacity: .8;
margin: auto;
width: 200px;
height: 300px;
transition: .5s;
position: relative;
background-color: #FFF;
background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
background-size: 200% 100%;
background-position: 60% 50%;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
}
#container_inner:hover, #container_txt:hover {
opacity: 1;
}
#container_txt {
color: #fff;
height: 0px;
bottom: 0px;
width: 200px;
transition: .2s;
position: absolute;
font: normal 1em calibri;
background-color: rgba(0, 0, 0, 1);
}
#container_inner:hover #container_txt {
height: 100px;
opacity: 1;
}
p {
top: -5px;
padding: 0px 10px;
position: relative;
}
p a {
color: #fff;
text-decoration: none;
}
#p_txt {
top: -15px;
position: relative;
font-size: 12px;
}
Just for a better understanding:
This CSS changes the opacity of the complete element (background, border, text, containing child-elements, ...)
#container{
background-color: #000;
opacity: 0.5;
}
But this CSS changes the opacity of a color. And this "modified" color will be used for background.
#container{
background-color: rgba(0, 0, 0, 0.5);
}
The problem is that a child cannot be less opaque than its parent. In this case, instead of a background image, I would use a :after pseudo element to create the background, then put the background image/opacity/ whatever on that, and leave the parent alone.
I modified your fiddle to do this (http://jsfiddle.net/srfGg/4/), but the main key is:
#container_inner:after{
opacity:0.8;
transition:.2s;
content: "";
display:block;
color:#FFF;
height:100%;
width:100%;
position: aboslute;
top:0;left:0;right:0;bottom:0;
background-color: #FFF;
background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
background-size: 200% 100%;
background-position: 60% 50%;
}
#container_inner:hover:after, #container_txt:hover {
opacity: 1;
}