Can someone point out why my image is not becoming darker? I am teaching myself some HTML and CSS and cant get this image to become darker.
.carousel-content {
min-height: 100%;
background-position: center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.image1 {
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
<div class="carousel-content">
<img class="image1" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" />
</div>
The background is behind the image,if you want to make it darker you need to put an overlay top of it, and set transparent background there.
.carousel-content {
position: relative;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 150px;
width: 275px;
background: rgba(0,0,0,0.5);
border-right: 2px dashed #fff;
}
<div class="carousel-content">
<img class="image1" src="http://via.placeholder.com/350x150/ff0000/ffffff" />
<div class="overlay"></div>
</div>
Or you can use css filter in modern browsers:
img {
filter: brightness(50%);
}
<img src="http://via.placeholder.com/350x150" />
You could also keep it the way you have it (assuming a black background) and just set the opacity for the image to fade it a bit and show the solid background color.
.carousel-content {
min-height: 100%;
background-position: center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 1);
}
.image1 {
width: 100%;
opacity: .5;
}
<div class="carousel-content">
<img class="image1" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" />
</div>
Related
I'm Trying to customize a box shadow to shape like a triangle behind an image. Like this:
But i don't know if theres a way to doing it using box shadow.
This is my code so far.
#image{
width: 200px;
box-shadow: -10px 10px #ff9900;
}
<img src="https://placeimg.com/200/180/any" id="image" />
A simple border with gradient will do it and it will be responsive:
#image {
border: 10px solid transparent;
border-image: linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%) 10;
}
<img src="https://placeimg.com/180/150/any" id="image" />
<img src="https://placeimg.com/250/150/any" id="image" />
Almost the same but with background:
.box{
width:200px;
height:150px;
padding:10px; /*control the space*/
background:
url(https://placeimg.com/180/150/any) center/cover content-box,
linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%);
}
<div class="box"></div>
I think the box-shadow property cannot be modeled to be a format different than your father element.
For example, you cannot make a triangle shadow for a square image, like your question.
Try to make a triangle in css and make that with a realative position. Then, use your image with a absolute position.
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
position: relative;
margin-top: 30px;
}
#image {
position: absolute;
top: 20px;
left: 17px;
}
<div id="triangle-bottomleft"></div>
<img src="https://placeimg.com/100/100/any" title="title of image" alt="alt of image" id="image">
I hope this will helpu.
I would suggest nesting the triangle and refrain from using position: absolute; in this case:
#img {
position: relative;
width: 200px;
background: url(https://placeimg.com/200/150) no-repeat right top;
padding: 10px 10px 0 0;
}
#triangle {
position: relative;
border-bottom: 150px solid orange;
border-right: 200px solid transparent;
z-index: -1;
}
<div id="img">
<div id="triangle"></div>
</div>
If compatibility with IE is a non-issue you could also use clip-path:
#img {
position: relative;
width: 200px;
height: 150px;
background: url(https://placeimg.com/200/150) no-repeat right top;
padding: 10px 10px 0 0;
}
#triangle {
position: relative;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
background-color: orange;
z-index: -1;
}
<div id="img">
<div id="triangle"></div>
</div>
I am trying to make an image have green overlay and a title inside the image itself at the same time while trying to be responsive all at the same time, i have tried everything and i just cant make it work.
.headline-picture{
height: auto;
width: 100%;
background-image:
linear-gradient(
rgba(10, 158, 0, 0.5),
rgba(10, 158, 0, 0.5)
);
}
<div class="article-headline">
<img class="headline-picture" src="example image">
</div>
I think i understand the requirement... Have a look at the below snippet. Is this what you were looking for?
I've put the overlay as a separate element and is position:absolute.
.article-headline {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.headline-picture {
height: auto;
width: 100%;
}
.overlay {
background-color: rgba(0, 128, 0, 0.2);
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
}
h1 {
position: absolute;
}
<div class="article-headline">
<img class="headline-picture" src="https://placekitten.com/640/360">
<div class="overlay"></div>
<h1>Title</h1>
</div>
How to make a transference layer on an image which reduces the image light at the corner but not at the center of the image? I need the result exactly as shown below:
I have tried the below code:
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
<html>
<body>
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Please help to do the required change to get the required output.
An absolutely positioned pseudo-element on a wrapping div and a sem-transparent box-shadow is one method.
body {
text-align: center;
}
.wrap {
display: inline-block;
position: relative;
overflow: hidden;
margin: 1em;
}
.wrap::after {
content: '';
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
border-radius: 50%;
box-shadow: 0 0 0 200px rgba(0, 0, 255, 0.35);
z-index: 1;
}
img {
display: block;
}
<div class="wrap">
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</div>
An absolutely positioned element in a wrapping div with a radial background is another method
.img {
position: relative;
float: left;
}
img {
display: block;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, rgba(0, 0, 255, 0.5) 50%);
}
<div class="img">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="200">
<div class="overlay"></div>
</div>
</div>
You have to wrap the image in a container and put an overlay div to can achieve the desired results
.img {
width: 250px;
position:relative;
}
img{
max-width:100%;
}
.overlay{
position: absolute;
background-color:rgba(0,0,0,0.7);
background: rgba(0,0,0,0.7); /* For browsers that do not support gradients */
background: -webkit-radial-gradient(circle,transparent 50%, rgba(0,0,255,0.7) 50%); /* Safari 5.1 to 6.0 */
height:100%;
width:100%;
left:0;
right:0;
top:0;
bottom:0;
}
<html>
<body>
<div class='img'>
<div class='overlay'></div>
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</div>
</body>
</html>
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I am trying to make some line appear(say about 10px) after hovering mouse on an image at the bottom of the image
I saw this on MTV's website in their "You would also like these" section below every post.They use css-background sprites to do that.
I am going mad after repeated failed attempts to recreate.Everythings works,except the main onhover line coming up.
This is my code so far
CSS
.yel_strip{background-position:-280px -495px; width:165px; margin:-8px 0 0 0; height:5px; position:absolute; display:none; z-index:1;}
.yel_strip:hover{ background:url(http://mtv.in.com/images/sprite_v1.png) no-repeat;}
HTML
<div class="movieL hover_thumb">
<div><img width="165" height="93" alt="" src=""/>
<div class="yel_strip"></div>
</div> </div>
Any help would be appreciated.Thanks
I've made working fiddle for you with no extra not needed markup in your html: http://jsfiddle.net/PJMPw/3/
Your HTML:
<a href="#" class="hoverable">
<img src="http://placekitten.com/g/300/300" />
</a>
And CSS:
.hoverable {
display: block;
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.hoverable:hover:after {
bottom: 0;
}
.hoverable:after {
content: "";
position: absolute;
width: 100%;
height: 10px;
bottom: -10px;
left: 0;
background: -moz-linear-gradient(left, rgba(46,170,232,1) 0%, rgba(255,235,137,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(46,170,232,1)), color-stop(100%,rgba(255,235,137,1)));
background: -webkit-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: -o-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: -ms-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: linear-gradient(to right, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
This is the HTML:
Replace http://yoururl with your url.
<div class="container">
<span></span>
</div>
This is the CSS:
Replace http//yourimage with your image address.
.container {
width: 165px;
height: 93px;
background: url('http//yourimage');
position: relative;
}
#internal_image {
display: blocK;
width: 165px;
height: 93px;
}
#internal_image:hover span {
display: block;
width: 165px;
height: 5px;
position: absolute;
background: url(http://mtv.in.com/images/sprite_v1.png) no-repeat;
background-position: -280px -495px;
bottom: 0;
}
EDIT: Added EXAMPLE: http://jsfiddle.net/BmwCe/3/
The simples thing you could do is set a border on the image on hover.
i.e
markup
<div class="image-container">
<img src="../styles/images/Desert.jpg" />
</div>
css
.image-container {
display: inline-block;
position: relative;
}
.image-container img {
width: 100px;
height: 100px;
}
.image-container img:hover {
border-bottom: 5px solid green;
}
If you insist that you want to have a background image instead of border you could do this
<div class="image-container">
<img src="../styles/images/Desert.jpg" />
<div class="shiny-border"></div>
</div>
.image-container {
display: inline-block;
position: relative;
}
.image-container img {
width: 100px;
height: 100px;
}
.image-container .shiny-border {
position: absolute;
top: 90px; //subtract the height of the shiny-border from 100px which is the height // to have the inset effect of the image
height: 10px;
width: 100%;
display: none;
}
.image-container img:hover + .shiny-border {
display: block;
background-image: url(../styles/images/Hydrangeas.jpg);
}