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.
Related
I am trying to create a DP box for the user which is containing a user profile picture in it, where on image hover an edit profile image link will appear, but it is not working. When I hover over on the image it is blinking and the link doesn't appear correctly.
Here is the codepan link click here
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
transition: all .2s ease-in-out;
color: #fff;
font-size: 15px;
text-decoration: none;
display: none;
}
.dp img:hover ~ .edit-dp a {
display: block;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
The blinking glitch is because of that :hover effect of display: block on image instead of container div.
Since every time you :hover on the image you ultimately gonna edit it, so instead of display: none you can set it to opacity: 0 and on :hover you can set it to opacity: 1 and by doing this you'll get a nice transition effect too.
Here's the Snippet for a better view:
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
color: #fff;
font-size: 15px;
text-decoration: none;
opacity: 0;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.dp:hover .edit-dp a {
opacity: 1;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
Solution 1:
Use following css will make your effect nice.
.dp:hover > .edit-dp a{
display: block;
}
Make hover effect on div instead of image
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
transition: all .2s ease-in-out;
color: #fff;
font-size: 15px;
text-decoration: none;
display: none;
}
.dp:hover > .edit-dp a{
display: block;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
Working Codepen
Solution 2:
And Another solution is use pointer-events:none; on hover.
.dp img:hover ~ .edit-dp a{
display: block;
pointer-events:none;
}
Working Codepen
I have some image thumbnails and, on hover, I want the title to be displayed on top of a transparent black <div> overlay which covers the width and height of the thumbnail.
I'm using display: table and display: table-cell; respectively (to allow for vertical middle positioning).
However, every time I try this, the overlay <div> is acting as a small strip rather than covering the whole <div>.
I've tried adding padding and margins but am still unable to get my desired behaviour.
http://jsfiddle.net/jameshenry/t92qukz8/2/
The CSS:
.griditem {
position: relative;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
width: 50%;
overflow: hidden;
}
.titles {
position: absolute;
display: table;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
z-index: 999;
}
.titles p {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
.griditem:hover .titles {
text-decoration: none;
opacity:1;
}
h5 {
font-family: Helvetica Neue;
font-size: 5em;
color: #FFFFFF;
padding-bottom:0;
margin-bottom:-30px;
}
h6 {
padding-top: 0;
}
}
and the HTML
<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;">
<img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" />
<a href="http://www.google.com" class="titles">
<p>BIG TEXT<br>
small Title<p>
</a>
</div>
How can I alter my css/html to get my desired behaviour?
In order to have the table take up 100% height, it needs to have a height context to reference (since no parent is set to any 'height', it collapses). Your problem can be solved by adding a wrapper to your table that sets that context, and adding height:100%; to your display:table; element.
.griditem {
position: relative;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
width: 50%;
overflow: hidden;
}
/*added overlay CSS*/
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
}
.titles {
display: table;
width: 100%;
height: 100%; /*important, forces to 100% height of parent*/
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
z-index: 999;
}
.titles p {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
.griditem:hover .titles {
text-decoration: none;
opacity:1;
}
h5 {
font-family: Helvetica Neue;
font-size: 5em;
color: #FFFFFF;
padding-bottom:0;
margin-bottom:-30px;
}
h6 {
padding-top: 0;
}
<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;">
<img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" />
<div class="overlay">
<a href="http://www.google.com" class="titles">
<p>BIG TEXT<br>
small Title<p>
</a>
</div>
</div>
You could easily solve this by using a bit of jquery like so. Demo can be found here.
var pheight = $(".griditem").height();
$(".titles p").css("height", pheight);
$(window).resize(function () {
var pheight = $(".griditem").height();
$(".titles p").css("height", pheight);
});
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 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
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;
}