I'm trying to grey out a section of an image (two stripes at left and right). Is there a way to do this using just CSS?
I know I can use filters (i.e. filter: grayscale(100%)), but I don't want the entire image to be grey.
Pure CSS Solution with no extra markup
JSFIDDLE DEMO
HTML
<div class="image-container">
<img class="image-grey" src="http://placekitten.com/200/150" />
</div>
CSS
.image-container {
position:relative;
display:inline-block;
}
.image-grey {
display:block;
-webkit-filter: grayscale(100%);
}
.image-container:after {
position:absolute;
content:"";
top:0;
left:50%;
width:50%;
height:100%;
background-image:url(http://placekitten.com/200/150);
background-position:top right;
}
Put a div over it.
<div id="wrapper">
<img src="path/to/file.jpg" />
<div id="filter">
</div>
<style>
#wrapper {position: relative;}
#filter {
position: absolute;
top: 123px;
left: 123px;
width: 42px;
height: 42px;
background: rgba(255,0,0,0.5);
}
</style>
http://jsfiddle.net/BQ7J3/
If you do indeed wish to use the greyscale filter you will need to have two images on top of each other, one with the greyscale filter applied and clipped to the size you wish.
<div class="image-container">
<img class="image-grey clip" src="http://placekitten.com/200/150" />
<img class="image-coloured" src="http://placekitten.com/200/150" />
</div>
and
.image-coloured {
z-index: 0;
position: absolute;
}
.image-grey {
z-index: 1;
position: absolute;
-webkit-filter: grayscale(100%);
}
.clip {
clip: rect(0px,60px,150px,0px)
}
Fiddle
Related
I need to positionate several dots on one image with css.(see example)
I'm using the code below (for dot number 1):
<div id="photo1">
<div class="dot" style="left:calc(50px - 20px); top:calc(553px - 20px);">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>
and css :
#photo1 {position:relative; width:100%;}
.dot {position:absolute; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}
I don't have any problem still my picture width is 100% (e.g 580px). My coordinates x and y are calculted for that.
But, if I reduce my screen width (smartphone or tablet), the current image width is less than 100%.
If I supposing that the image width is 60%, how can I write something like this :
style="left:calc((60% * 50px) - 20px);top:calc((60% * 553px) - 20px);
to adjust position of my first dot regarding the current image width.
Do you have any ideas ?
Thanks a lot for all replies or suggestions.
Here is an example using percentage positioning:
https://codepen.io/lokase/pen/MWaxgjq
HTML:
<div class="con">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</div>
CSS:
.con {
max-width: 600px;
position: relative;
}
.dot {
background: red;
border-radius: 50%;
height: 20px;
position: absolute;
width: 20px;
}
.dot1 {
top: 10%;
left: 10%;
}
.dot2 {
top: 30%;
right: 20%;
}
.dot3 {
bottom: 40%;
left: 50%;
}
img {
width: 100%;
}
try positioning the elements using %. That would alter the width as the element's width changes.
Try something like this.
I have made it fixed to bottom.
For left I have given 10%, but you can change that to your requirements (580/30=19.33%).
#photo1 {position:relative; width:100%;}
.dot {position:fixed; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}
<div id="photo1">
<div class="dot" style="left:10%; bottom:0px;">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>
I attached a drawing of what my page looks like. The page has a width of 980px and the image has a width of almost 1200px. What I want to achieve is to have the page centered and to show as much of the image as possible while also keeping the image centered. I tried to absolutely position the image but then on mobile devices the browser page is set to the width of the image and the content does not stay centered.
Basically, there could be screens where not the entire image is shown to the user but only as much as fits the screen.
CSS:
.page_container {
width: 980px;
margin: 0 auto;
}
.image {
position: absolute;
left: 0;
right: 0;
}
HTML:
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>
pls use the position: relative for the image.like this:
<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>
css code:
.page_container {
width: 980px;
margin: 0 auto;
background: orange;
}
.image {
position: relative;
left: 50%;
margin-left: -600px;
}
the margin-left is equal to the img's width/2. pls view the demo.
You Can Try This
<div class="popup">
<div class="wrapper">
<img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
</div>
</div>
CSS:
.popup{
position:fixed;
left:50%;
}
.popup .wrapper{
position:relative;
left:-50%;
/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
}
html{background-color:#aaa;}
Example : jsfiddle
by Elad Shechter
.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}
You can try this way:
HTML:
<div class="wrapper">
<div class="image">
<img src="img/img.jpg">
</div>
</div>
JS:
<script>
$(document).ready(function() {
$('div.image').each(function() {
var imageSrc = $(this).find('img').attr('src');
$(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
});
});
</script>
CSS:
.wrapper {
float: left;
width: 100%;
overflow: hidden;
}
.wrapper .image img {
visibility: hidden;
}
Easy way to center <img /> tag.
body {
margin: 0;
}
.warpper img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover
}
<div class="warpper">
<img src="https://i.stack.imgur.com/gkOwi.jpg" />
</div>
How about this: https://jsfiddle.net/squadjot/hva34oju/
HTML:
<div id="imgwrap">
<img src="https://i.stack.imgur.com/gkOwi.jpg">
</div>
CSS:
#imgwrap {
text-align:center;
}
#imgwrap img {
margin:0 -1000%; /* don't ask :P */
}
Works in every browser i've tried. IE, Chrome, Opera, FF
background-size:auto;
set this property for your image
Try this:-
.image {
position: absolute;
left: -50%;
}
I think it will work for bigger images...
.image {
position: absolute;
left: -50%; }
I have a in my webpage which carries 2 images. I want one image to be aligned left and other to the right end of the division.
The JsFiddle
Here's my HTML:
<div class="header">
<img id ="ttl" src="Home_files/images/ttl.png">
<img id ="se" src="Home_files/images/se.png">
</div>
and CSS:
.header {
position: relative;
top: 0%;
height: 20%;
}
/*Header CSS*/
img#ttl {
position: relative;
top:50%;
height: 50%;
left: 0px;
}
img#se {
position: relative;
top:60%;
height:30%;
vertical-align:right;
margin-right: 2%;
}
PS: I tried float:right;. Its works in in Chrome and FF but not in IE.
And ofcourse this div has a parent div. But I don't think that will be a problem.
You can wrap the images inside a position relative container and use position: absolute; to position them to bottom left and bottom right
Demo
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
div.wrap {
width: 600px;
border: 1px solid #f00;
height: 300px;
position: relative;
}
.wrap img {
border: 1px solid blue;
position: absolute;
bottom: 0;
}
.wrap img:nth-of-type(1) {
left: 0;
}
.wrap img:nth-of-type(2) {
right: 0;
}
Note: Am using nth-of-type to select images so that I don't have to
declare classes for each image, if you want to support older browsers,
you need to add class for each image and replace :nth-of-type with
those classes
try this
<div class="header">
<div class="left"><img id ="ttl" src="Home_files/images/ttl.png"></div>
<div class="right"><img id ="se" src="Home_files/images/se.png"><div>
</div>
CSS
.left{
float:left;
}
.right{
float:right;
}
Demo
I used a table in a basic HTML header div for an email. It worked fine. In tr, had one image on left as td and another on right with float: right in another td.
I need to define a div which must stay with the top at the normal position, which differs from the top of the surrounding element:
position:relative
top:0
and which grows in the height up to the size of the surrounding element:
position:absolute
bottom:0
I have no idea how to combine the both. Whenever I use a relative box I loose the absolute bottom and whenever I use an absolute box I loose the relative top.
Can anybody help me how to do this in CSS?
Here is an example:
<html>
<head>
</head>
<style type="text/css">
#media screen {
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#head {
background-color: gray;
}
#rel {
background-color: green;
position: relative;
top: 0;
bottom: 0;
float: left;
}
#abs {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
float: left;
}
}
</style>
<body>
<div id="head">
<h1>Head</h1>
</div>
<div id="abs">
<h2>absolute</h2>
</div>
<div id="rel">
<h2>relative</h2>
</div>
</body>
</html>
"relative" does not grow at all and "absolute" grows too much.
div {
top:0;
height:100%; /* height calculated based off the height of parent element */
margin:0;
}
height property CSS
Use display:table on the outer div and display table-row on the inner ones:
See this fiddle: http://jsfiddle.net/JKQ2y/15/
Html:
<div class="outer">
<div class="rel">
<div class="m b">text</div>
</div>
<div class="inner">
<div class="m r"></div>
</div>
</div>
Css:
.outer{
border:1px solid black;
height:100px; width: 100px
display:table;
}
.rel {
height:30px;
display:table-row;
}
.inner {
border: 1px solid red;
position:relative;
display:table-cell;
}
.m {height:100%;}
.m.b {border:1px solid blue;}
.m.r {border:1px solid red;}
HTML:
<div class="body">
<div class="head">
<div class="head-content">text</div>
</div>
<div class="growing-area">
</div>
</div>
CSS:
.body{
height:100px; width: 100px;
display:table;
}
.head {
height:0px;
display:table-row;
}
.growing-area {
position:relative;
display:table-cell;
}
defining a small height of the head is important but the real size is then controlled by the content or you can define the head-content height:
.head-content {
height:30px;
}
Fiddle: http://jsfiddle.net/JKQ2y/36/
I have a div and an image inside it as a background:
<div id="background">
<img src="background.png" class="stretch" alt="" />
<div class="header">
<span>header</span>
</div>
<div class="picture">
<img src="pic" alt="" />
</div>
</div>
And the following css:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
.header {
position: absolute;
left: 12px;
top: 18px;
font-family: Arial;
font-size: 14pt;
color: #3A4549;
margin-bottom:
}
here's a fiddle: http://jsfiddle.net/3j7vk/
How can I add the image right under the header without specifying an absolute position?
Right now it goes under the background image. Thanks!
Is this what you're after?
http://jsfiddle.net/3j7vk/1/
Is there any reason you're not just adding the image as a background to the div?
#background {
background: url(background.png) no-repeat;
background-size: cover;
/*other rules*/
}
If the image is just a background, it shouldn't appear in the markup at all.
See this page on the background-size property.
It's odd that you're not using CSS's background-image property, but to answer your question, you can give elements z-index to specify their order and make them appear on top of each other. It only works when the position property is specified, but rather than making it absolute, make it relative:
.stretch {
width:100%;
height:100%;
position: relative;
z-index: 1;
}
Then give your .header a z-index of it's own:
z-index: 2;
But to be honest, using CSS's background properties would be the better option in my opinion.
Ok, if you want to use an img as your background you can do it like so:
<div id="background">
<img src="http://placekitten.com/g/600/600/" class="stretch" alt="" />
<div id="container">
<div class="header">
<span>header</span>
</div>
<div class="pic">
<img src="http://lorempixel.com/200/200/" alt="" />
</div>
</div>
</div>
css:
#container {
position:absolute;
top:0;
left:0;
}
#background, .stretch, #container {
width: 100%;
height: 100%;
}
.header {
font-family: Arial;
font-size: 14pt;
color: #3A4549;
margin-bottom:
}
.pic
{
height: 114px;
}
fiddle: http://jsfiddle.net/JKirchartz/SrvyD/
That way everything in your container flows like a plain html document and you don't have to position everything.