I have a an image, 500 px height and width. I used border-radius to make it a circle image. I also have a solid background color that I use border-radius on to make it a circle as well.
I am trying to create an overlay on hover by reducing the opacity of the image, letting the background image peer through. I have it basically working, although there is about a 1px overlap of showing the background image on the bottom of the actual image.
Snippet:
.image-wrapper {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<div class="image-wrapper">
<img class="testing red" src="img.jpg">
</div>
As you can see from the example there is about one pixel of the background showing at the bottom of the image before any hover.
I think the issue here is that img has display: inline by default.
You can fix it by setting your img to display: block in your CSS
.image-wrapper {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 50%;
}
<div class="image-wrapper">
<img class="testing red" src="http://lorempixel.com/400/400">
</div>
Try adding this css:
.image-wrapper{
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
Here is the sample example for you question,hope this will help you.
http://jsfiddle.net/z3rLa/1/
.image-overlay {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
border:2px solid #000;
}
.image-overlay:hover {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
opacity:0.5;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 50%;
}
<div class="image-overlay">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSODZIzJ1LLVMxlyd4RKB8TmvAeufTRGolSlX64IagMNtWvo4ij">
</div>
Related
I would like to have a 5px margin around each of my divs but when I add it in CSS, there is a 5px margin on every side except for in between the divs and on the bottom. The two divs also overflow off the page on the bottom. I understand this is because of the 5px margin on top pushing the divs off screen. I am unsure how to make it just add the margin all around and shrink the divs accordingly.
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: 10%;
height: 100%;
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: 90%;
height: 100%;
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
Resulting Page
Divs pushed off screen on bottom and no margin in-between divs. 5px margin on top, left, and right is present.
I am new to HTML and CSS so any helps greatly appreciated.
Use CSS Flex
/*QuickReset*/ * { box-sizing: border-box; margin: 0; }
html {
height: 100%;
}
body {
background: black;
height: 100%;
position: relative;
display: flex; /* Use flex! */
padding: 5px; /* Instead of children margin */
/* gap: 5px; /* Uncomment to add a gap between your child elements! */
}
.one,
.two {
border: 3px solid green;
border-radius: 5px;
}
.one { width: 10%; background: red; }
.two { width: 90%; background: blue; }
<div class="one">
</div>
<div class="two">
</div>
box-sizing: border-box does not include handling/including of margins in the overall width or height of the elements, only padding and borders. Therefore you have to subtract the margin values from the width or height values.
In your case you should use calc values on all height and width settings where there's a margin. I.e. if you have 5px margin (= on all sides), use for example calc(100% - 10px) where you want 100% width or height. Similar with other percentage values - see your adapted code below:
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: calc(10% - 10px);
height: calc(100% - 10px);
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: calc(90% - 10px);
height: calc(10% - 10px);
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
using the css calc function on the width of .two to subtract 10px (2x5px margins) from the 90% width, appears to give a reasonable margin.
width: calc(90% - 10px);
I am not sure why there is not a visible 10px (2x5px) margin between .one and .two though.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: 10%;
height: 100%;
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: calc(90% - 10px);
height: 100%;
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
On the link there is an example; I have three elements, in this case, the body with the a universe background, the div, with a white background and an img where in the middle there is a hole. I want to see the first UNIVERSE background inside the heart shape and not the second/WHITE.
https://jsfiddle.net/adrianvcch/t053p4hb/
html {
background-color: black;
}
body {
margin: 50px;
background-color: white;
height: 500px;
}
.heart {
position: relative;
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>
CSS Masking
Mask # MDN
html {
background-image: url(http://scienceblogs.com/startswithabang/files/2013/02/2xcluster.jpg);
}
body {
margin: 50px;
text-align: center;
}
.heart {
position: relative;
display: inline-block;
height: 200px;
background: white;
-webkit-mask: url(http://s3.postimg.org/cqraf51bn/heart.png);
mask: url(http://s3.postimg.org/cqraf51bn/heart.png);
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>
EDIT:
USING AN IMAGE:
Since the real case needs to use an image here's what can be done:
CODE SNIPPET:
body {
margin: 50px;
background-color: white;
height: 500px;
}
html,
.heart {
background-color: black;
}
.heart {
position: relative;
max-height: 200px;
margin: 0 auto;
overflow: hidden;
display: inline-block;
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>
SOLUTION:
USING A CSS SHAPE:
Here's something you could try:
Use a heart shape with plain CSS.
Set the same background-color in your html and heart with multiple selectors separated by comma using the same css property.
CODE SNIPPET:
body {
margin: 50px;
background-color: white;
height: 500px;
}
.heart {
display: inline-block;
height: 60px;
width: 60px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
}
.heart:before,
.heart:after {
content: "";
border-radius: 50%;
height: 60px;
width: 60px;
position: absolute;
}
.heart:before {
left: 0;
top: -30px;
}
.heart:after {
left: 30px;
top: 0;
}
html,
.heart,
.heart:before,
.heart:after {
background-color: black;
}
.heart-wrapper {
background-color: #c95253;
padding: 105px 80px 35px 80px;
display: inline-block;
}
<div class="heart-wrapper">
<div class="heart"></div>
</div>
Add this changes into your codes, But your image should be transparent to adapt the background color.
html {
background:url(https://source.unsplash.com/category/nature);
}
body {
margin: 50px;
height: 500px;
}
.heart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
img{
width:100%;
height:200px;
}
Good Morning, I am currently working on portfolio and I am trying to make my cover elements completely center vertically and horizontal. I have managed to do this with margin: 0 auto and display: table-cell, vertical-align and for some reason when I am added my CSS3 triangles it began to push my logo to the left. Is there any tricks to fix this?
.cover {
background-size: cover;
background-color: white;
display: table;
width: 100%;
padding: 0 20%;
height: 1900px;
}
.logo-container {
margin: 0 auto;
background-size: cover;
height: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
padding-top: 40px;
padding-bottom: 40px;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #84cfc5;
border-left: 100px solid transparent;
padding-top: 1500px;
margin-left: 850px;
margin: 0 auto;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #84cfc5;
border-right: 100px solid transparent;
margin-right: 1000px;
margin-left: -200px;
position: relative;
left: -1000px;
right: -1000px;
top: 150px;
}
<div class="cover">
<div class="logo-container">
<img class="logo" src="images/personal-logo.png" alt="logo-brand" />
</div>
<div id="triangle-topright"></div>
<div id="triangle-bottomright"></div>
</div>
The triangles are causing a shift because they are taking up space in the page flow. You should position them using position:absolute to get them out of the page flow, with position:relative set on the parent .cover div. Example below.
html, body {
height: 100%;
margin: 0;
}
.cover {
background-color: white;
display: table;
width: 100%;
height: 100%;
position: relative;
}
.logo-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #84cfc5;
border-left: 100px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #84cfc5;
border-right: 100px solid transparent;
position: absolute;
left: 0;
top: 0;
}
<div class="cover">
<div class="logo-container">
<img class="logo" src="http://placehold.it/240x80" alt="logo-brand" />
</div>
<div id="triangle-topright"></div>
<div id="triangle-bottomright"></div>
</div>
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}
This is what I'm looking for:
I have cropped an image with my html and css but have no idea how to place rectangle in it. I guess for animation I should use :hover option for my crop class in div.
My code: http://jsfiddle.net/8t2hmxmn/
I guess this will fit your needs, to adjust the height of the details element, just edit the height: value inside .details
html * {
box-sizing: border-box;
}
.crop {
background-image: url('http://cs628119.vk.me/v628119319/10059/Ag3oy3YU6wY.jpg');
width: 200px;
height: 150px;
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
}
.shape {
width: 200px;
height: 50px;
color: black;
}
.details {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
transition: all 1s;
color: white;
}
.crop:hover > .details {
bottom: 0;
}
<div class="shape">
<div class="crop">
<div class="details">
Yes, this is cat!
</div>
</div>
</div>