I want to have an overlay over my image background, in order to see the white text above the image more clearly.
Why won't this solution work ?
HTML:
<div id="myDiv" class="bg1 image-cover">
<p>H</p>
</div>
CSS:
#myDiv {
width: 300px;
height: 300px;
color: #fff;
position: relative;
font-size: 100px;
font-weight: bold;
}
.image-cover:before {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
.bg1 {
background-size: cover;
background: url('https://2zpt4dwruy922flhqyznip50-wpengine.netdna-ssl.com/wp-content/uploads/2014/12/lock-and-stock-photos.jpg');
}
while this one does:
HTML:
<div id="myDiv" class="bg1">
<div class="image-cover">
<p>H</p>
</div>
</div>
CSS:
...
.image-cover {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
...
I think I am misunderstanding the way :before works, but I am not fan of the second solution as it has one more div than the first.
I'm glad you're already aware of the second solution; this tends to be the approach I normally use (though not for any particular reason). You can simply modify your original approach as follows and get the desired effect:
#myDiv > p {
position: relative;
}
Namely, give the nested <p> tag a non-static position value. See here: CodePen
You can just increase the z-index of the text which is to be overlaid over the image like this:
#myDiv{
z-index: 1;
}
#myDiv p{
z-index: 2; /* should be more than the z-index of the background */
}
Related
I'm wondering if it's possible to reproduce this text effect:
It should appear as if the text highlights were reducing the opacity of the images. I guess what you need is a copy of the background layer getting masked in the shapes/positions of the text highlights. But is there a way to really make these masks automatically resize/reposition according to the lines of text? Or any other way to achieve the effect?
This might better explain what I'm after:
You might be looking for the css property background-attachment: fixed. This does have the caveat that the background will no longer scroll with the page and remain static, but this way you can guarantee the overlap between the element background and the container background remain the same. There is a fix for the scrolling issue via javascript, for a minor overhead cost, depending on how heavy the graphics are for the browser to render/reposition.
Then you simply apply the same background to the background containing element(.wrap in my case) and the text containing element(wrap in my case) and you get your desired effect as shown in your second image.
Then put the mark in a paragraph element and repeat the text twice. Once in the paragraph, once within the mark.
Then set the paragraph to position relative, and the mark to absolute, so they overlap each other perfectly. This is to counteract the wrap being transparent and not showing the text properly, as the text also becoming transparent.
.wrap, .wrap mark {
background-image: url('https://i.imgur.com/hAodNjT.jpg');
background-attachment: fixed;
}
.wrap p {
position: relative;
}
.wrap mark {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.4;
}
img {
width: 300px;
height: auto;
}
.wrap {
padding-top:160px;
position: relative;
width: 400px;
height: 400px;
}
.wrap img {
position:absolute;
top:60px;
z-index:0;
}
.wrap p {
position:relative;
z-index: 1;
}
<div class="wrap">
<img src="https://i.imgur.com/cULI8TG.png">
<p>some text that runs over the image<mark>some text that runs over the image</mark></p>
<p>some other text that runs over the image<mark>some other text that runs over the image</mark></p>
</div>
with a background scroll fix, does introduce more overhead when scrolling
var $affected = $('.wrap, .wrap mark');
let handler = (e) => {
$affected.css({'background-position' : '-'+window.scrollX+'px -'+window.scrollY+'px'});
}
$(window).on('resize scroll', handler);
.wrap, .wrap mark {
background-image: url('https://i.imgur.com/hAodNjT.jpg');
background-attachment: fixed;
}
.wrap p {
position: relative;
}
.wrap mark {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.4;
}
img {
width: 300px;
height: auto;
}
.wrap {
padding-top:160px;
position: relative;
width: 400px;
height: 400px;
}
.wrap img {
position:absolute;
top:60px;
z-index:0;
}
.wrap p {
position:relative;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<img src="https://i.imgur.com/cULI8TG.png">
<p>some text that runs over the image<mark>some text that runs over the image</mark></p>
<p>some other text that runs over the image<mark>some other text that runs over the image</mark></p>
</div>
You can use mark tag of HTML using background color with opacity:
/*custom styling of higlihter*/
mark{
background: rgba(255, 255, 255, 0.38);
color: black;
}
.wrap{
background-image: url("https://image.shutterstock.com/image-illustration/color-splash-series-background-design-260nw-587409425.jpg");
height: 230px;
width: 230px;
}
<div class="wrap">
Do <mark>not forget to buy milk today</mark>
<div>
Note: the mark tag is not supported in Internet Explorer 8 and earlier versions.
Another solution, using background and color on <p> tag with gradient:
.wrap{
background: grey;
color: white;
display: inline-block;
background:url(https://thumbs.dreamstime.com/b/halloween-background-full-moon-creepy-house-flying-bats-halloween-background-full-moon-creepy-house-125024932.jpg);
background-size: cover;
height: 200px;
width: 200px;
}
p{
font-size:20px;
background-image: linear-gradient(to right, #ffffff00, #000000c9 , #ffffff00);
text-align: center;
}
<div class="wrap"><p>Don't play with<p></div>
You can change the color accordingly.
Reference.
How can I make very small blur effect with -webkit-filter (or filter), between 1px and 0?
I've already tried something between 1em and 0.01em but as far as this filter is recalculating this to pixels and below if it's drops below 1px then is no blur at all..
here is a quite complex solution which involves duplicating some content:
http://jsfiddle.net/BWj28/1/
It works by replicating the content box 4 times, shifting the replicants by 1 pixel in every direction and calculating the approppriate opacity for the replicants. The version above requires an opaque background.
---
-a-
---
--- con ---
-d- ten -c-
--- t ---
---
-b-
---
HTML sample layout:
<div class="wrap">
<div class="a t">Hello World!</div>
<div class="b t">Hello World!</div>
<div class="c t">Hello World!</div>
<div class="d t">Hello World!</div>
<div class="content">Hello World!</div>
</div>
CSS:
.wrap {
position: relative;
}
.a,.b,.c,.d {
position: absolute;
}
.a { top: -1px; left: 0px; z-index:1; opacity:1; }
.b { top: +1px; left: 0px; z-index:2; opacity:0.5; }
.c { top: 0px; left: +1px; z-index:3; opacity:0.333; }
.d { top: 0px; left: -1px; z-index:4; opacity:0.25; }
.wrap > div {
background: yellow; /* any opaque background */
}
One think i want to tell you this type of features in not applied in CSS3 because it doesn't have full support but the future of CSS may provide this feature...
Anyways -webkit-filter are only applicable in chrome only...
So, codes like that can be useful to you,
img {
-webkit-filter: grayscale(0.5) blur(10px);
}
Refer this: Click...
Is there a simple way to style element like this?
Supposed to be used on a mobile so CSS3 is fully available. Can't think of a simple way. Images are out of question.
It has to be this blocky and there supposed to be a text within (this is a blocky 8-bit button)
This jumps off of feeela's beginnings, but it's different enough to warrant its own answer.
Rather than putting a colored block overly, it only adds red-colored elements, allowing background to show through. HOWEVER, to calculate it properly (so that they're square corners!) I had to set a fixed width height. There's probably some sort of wacky way to do this with percentages, but for proof of concept it was too headachey to contemplate. Since the requirement is for fixed height variable width, this should work.
The pseudo-elements need to have content or they will "collapse". The content can be empty, but that property needs to be set.
CSS:
/* main button block */
.button {
display:inline-block;
background: #f00;
position: relative;
line-height: 60px;
text-align: center;
padding: 0 20px;
height: 60px;
margin-left: 0.5em;
}
/* common background color to all */
.button, .button::before, .button::after {
background-color: #f00;
}
/* shared styles to make left and right lines */
.button::before, .button::after {
content: "";
position: absolute;
height: 50px;
width: 5px;
top: 5px;
}
/* pull the left 'line' out to the left */
.button::before {
left: -5px;
}
/* pull the right 'line' out to the right */
.button::after {
right: -5px;
}
Fiddle: http://jsfiddle.net/3R9c5/2/
How about this?
HTML:
<div class="block">(text goes here)</div>
CSS:
body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}
Edit: updated after the latest insights into the demands of the question.
You can insert each of that four blocky-corners by appending pseudo elements via ::before or ::after.
e.g.:
.button {
background: #f00;
position: relative;
}
/* corner top left */
.button::after {
position: absolute;
top: 0; left: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner top right */
.button::after {
position: absolute;
top: 0; right: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner bottom left */
/* … */
The CSS border-radius attribute
maybe this will help you. Or you can just add new class, "cadre" for example
.cadre
{
border-radius: 10px;
}
to your css file, then affect it to the div.
I don't think border-radius can accomplish that. This is the simplest way I can think of:
http://jsfiddle.net/DpLdt/
CSS:
body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}
HTML:
<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>
I have a div which is 145px X 145px. I have an img inside this dive. The img could be of any size (longest side being 130px). I would like the image to be centered vertically in the div. Everything that I have tried works in most browsers, but not IE7. I need something that will work in IE7.
here's a cross-browser solution:
<div class="img-container"><img src="picture.png" class="cropped"/></div>
div.img-container {
width: 390px;
height: 211px;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
img.cropped {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can replace the image by a background on the div like this :
<div style="background:url(myimage.jpg) no-repeat center center"></div>
Not sure about IE7 but for IE9 and rest of the modern browsers following works.
.picturecontainer{
width:800px;
height:800px;
border:solid 1px;
display:table-cell;
vertical-align:middle;
}
.horizontalcenter{
display:block;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}
To use it
<div class="picturecontainer"><img src="" class="horizontalcenter"/></div>
This places images at dead centre.
Not sure what you have tried so far but the vertical-align CSS property should work if the images are displayed as inline elements.
Some info on vertical-align: http://www.w3schools.com/css/pr_pos_vertical-align.asp
If you have to account for all image heights, that is pretty much the only way without using JavaScript.
If the images are not inline elements and you only had to accommodate images of a consistent height, you could do something like this:
img {
margin-top: -50px; /* This number should be half the height of your image */
position: absolute;
top: 50%;
}
Otherwise the only way I can think to accomodate images of varying height would be to do something similar with your CSS but set the negative margin to half of the image's height with JS.
Using the line-height property solved the problem for me.
Reference: vertical-align image in div
HTML:
<div class="img_thumb">
<a class="images_class" href="large.jpg" rel="images"><img src="http://www.minfo.pt/fotos/_cache/produtos/0/068.M.976010002__thumbnail_50_50_true_sharpen_1_1.JPG" title="img_title" alt="img_alt" /></a>
</div>
CSS:
.img_thumb {
float: left;
height: 120px;
margin-bottom: 5px;
margin-left: 9px;
position: relative;
width: 147px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
line-height:120px;
text-align:center;
}
.img_thumb img {
vertical-align: middle;
}
I created a little jQuery code to do this without having to use nasty tables:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
imagepos = function () {
$('img').each(function () {
imgheight = Math.round($(this).height() / 2);
imgwidth = Math.round($(this).width() / 2);
$(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
});
}
$(window).load(imagepos);
</script>
And you also need a little bit of css:
div
{
position:relative;
}
img
{
display:block;
margin:auto;
max-width:100%;
position:absolute;
top:50%;
left:50%;
opacity:0;
}
Normally, you center images with display: block; margin: auto, but if the image is larger than the container, it overflows to the right. How do I make it overflow to the both sides equally? The width of the container is fixed and known. The width of the image is unknown.
A pure css solution
Requiring one extra wrapper (tested in FireFox, IE8, IE7):
Improved Answer
There was a problem with the original answer (below). If the image is larger than the container that outer is centered on with it's auto margins, then it truncates the image on the left and creates excessive space on the right, as this fiddle shows.
We can resolve that by floating inner right and then centering from the right. This still truncates the img off the page to the left, but it does so by explicitly pushing it that way and then centers back off of that, the combination of which is what prevents the extra horizontal scroll on the right. Now we only get as much right scroll as we need in order to see the right part of the image.
Fiddle Example (Borders in fiddle are for demo only.)
Essential CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
position:relative;
float: right; /* this was added and display removed */
right: 50%;
}
div.inner img {
position: relative;
right:-50%; /* this was changed from "left" in original */
}
If you desire no right scroll at all for wide images
Then using the above, also set whatever element wraps outer (like body or a third wrapper) to have overflow: hidden.
Original Idea (for History)
Fiddle Example (Borders in fiddle are for demo only.)
HTML
<div class="outer">
<div class="inner">
<img src="/yourimage.png">
</div>
</div>
CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
display: inline-block;
position:relative;
right: -50%;
}
div.inner img {
position: relative;
left:-50%;
}
Here's a 2 line CSS solution (a couple more lines might be required for cross-browser support):
img {
margin-left: 50%;
transform: translateX(-50%);
}
HTML
<div class="image-container">
<img src="http://www.google.com/images/logo.gif" height="100" />
</div>
CSS
.image-container {
width: 150px;
border: solid 1px red;
margin:100px;
}
.image-container img {
border: solid 1px green;
}
jQuery
$(".image-container>img").each(function(i, img) {
$(img).css({
position: "relative",
left: ($(img).parent().width() - $(img).width()) / 2
});
});
See it on jsFiddle: http://jsfiddle.net/4eYX9/30/
Alternative pure CSS solution is to use transform attribute:
HTML:
<div class="outer">
<img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
CSS:
.outer {
position: relative;
width: 100px;
border: 1px solid black;
height: 150px;
margin-left: 100px; /* for demo */
/* overflow: hidden; */
}
img.image {
width: 200px;
opacity: 0.7;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
Fiddle
Just to add a overflow:hidden to parent div to hide the extra area of the image.
Your best bet is to set it as background image of the container instead.
#container {
background: url('url/to/image.gif') no-repeat center top;
}
In fact there is a simpler pure css/html way (without large horizontal scroll) :
Html :
<div class="outer">
<img src="/my/sample/image.jpg">
</div>
Css :
If you don't want to see image overflow
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: hidden;
position: relative;
height: 200px;
}
With image overflow visible
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: visible;
position: relative;
height: 200px;
}
body, html {
overflow-x:hidden;
}
A background solution with image overflow visible :
Html :
<div class="outer">
<div class="inner"></div>
</div>
Css :
div.outer {
width: 100%;
height: 200px;
}
div.inner {
background: url('/assets/layout/bg.jpg') center no-repeat;
position: absolute;
left: 0;
width: 100%;
height: inherit;
}
assuming outer is in a width specified container.
I see this is an old post, so maybe everybody knows this by now, but I needed help for this and I solved it using flex:
.parent {
display: flex;
/* give it the width and height you like */
}
.parent img {
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
I can only think of a Javascript solution since what you need to do is relatively position the image a negative amount to the left of its container:
jQuery
$(document).ready(function(){
var theImg = $('#container img');
var theContainer = $('#container');
if(theImg.width() > theContainer.width()){
theImg.css({
position: 'relative',
left: (theContainer.width() - theImg.width()) / 2
})
}
})
I found this to be a more elegant solution, without flex, similar to something above, but more generalized (applies on both vertical and horizontal):
.wrapper {
overflow: hidden;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */ /* optional */
}
I don't think there is a pure CSS solution (Except for the next answer :)). However with Javascript it would be just a matter of finding the width of the image, subtracting the container width, dividing by two and you have how far to the left of the container you need.