When I blur a image it overflows the parent container, even specifying overflow to be hidden.
Is there a way to keep the blurred edges inside dimensions?
The image needs to be as css background and not inside tag
Example not working:
.box{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
.blur{
width: 100%;
height: 100%;
overflow: hidden;
-webkit-filter: blur(20px);
background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}
http://jsfiddle.net/tMjsJ/1/
It can be achieved by applying a margin to the child element and overflow:hidden to the parent.
.box {
overflow: hidden;
margin:5px;
}
.blur {
-webkit-filter: blur(20px);
margin: -5px 0 0 -5px;
background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
height:300px;
width:300px;
}
See an example here: http://jsfiddle.net/n1ck/tMjsJ/5/
As Joshua pointed out, it is the same technique as used here: Defined Edges With CSS3 Filter Blur
So, apparently, this doesn't seem to work on background images. Quite interesting find :) A similar but not exact post was demonstrated here:
Defined Edges With CSS3 Filter Blur
I would imagine that if you want to accomplish the same effect, try changing from using a div with a background image to an image itself, using width / height of 100%.
Edit: Check out #N1ck's answer. Applying a negative margin (even -1px) works seems to trigger the proper effect. Nice.
Also - to avoid the bleeding background color (white), or at least manage it better, try setting a background color in addition to the image.
Related
I am trying to achieve an effect where I can diagonally crop an image in a way that is displayed below. I am aware of clip path as a solution but it would not be suitable in this scenario since it is not supported by certain browsers which are essential for this particular task. (IE and Edge)
Additionally, the cropped edge would need a black border which adds on to the complexity of what I am trying to do. Having searched for answers and coming up with anything, any suggestions would be appreciated.
Maybe you could overlay the image with a rotated element (div or something) that you give a border and white background. This solution would work if you're okay with a solid background color.
Another solution, depending on your requirements, could be to simpy use a .png image with transparency.
Yes you can, it's a bit tricky to get the sizes of the divs correct. But here's generally how to do it:
HTML:
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
<span>asdf</span>
</div>
</div>
</div>
CSS:
#content {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-60deg);
transform-origin: 50% 50%;
position: relative;
}
#content span {
position: relative;
top: 30px;
left: 30px;
}
#innerwrapper {
border-right: solid 3px black;
overflow: hidden;
width: 100px;
height: 100px;
}
#outerwrapper {
transform: rotate(60deg);
transform-origin: 50% 50%;
width: 120px;
height: 120px;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/ywfpeve8/
To explain this:
You have a div that contains the content itself. In this example it's just a span, but it can be anything. (I put it in to see that in the end everything is horizontal again)
You rotate that content div to some degree that suits you.
You place that div in a wrapper with a different size where you can position your content in. That div has an overflow: hidden, to crop all that content that is outside of the inner wrapper box. That wrapper then also has the border where you want the crop to be highlighted.
That inner wrapper is placed in an outside wrapper that rotates the same amount at the content div, but backwards, leaving you with the original 0 degree alignment of the content. This div again has overflow: hidden to crop that inner wrapper again so that you can hide the other "crop edges" that you want to be invisible. In my example code I didn't to the correct dimensions and positionings as it takes a bit to get right. But if you have an image with a white background, that shouldn't be very hard anymore to get things right.
Bonus: the background of the top-level element (that element that holds the outerwrapper can have any background at all and you won't see a rectangular box at the bottom right corner (for this example) as everything just happens with overflow: hidden and without bars that go over the content to hide it :)
I would like to know how can i make the "scroll to the top upon hover" feature found in this website : http://www.creativespad.com/free-divi-layouts/
If you hover on each grid the image will scroll slowly to the top and stop there.
I already found an answer to this on stackoverflow.com
Auto scroll image taller than container on hover
But what i need is that answer without Javascript. In the above link there is a non-javascript answer but have no idea how to modify it for my long image. (see image below)
http://www.creativespad.com/free-divi-layouts/wp-content/uploads/2016/06/mighty.jpg
I dont want javascript cause I am using divi theme and I have no idea where to place the javascript.
I am newbie btw. Thank you soo much for you help
Let me answer your question.But first you need the javascript to know the height of the image. To answer the question "how many pixels will you scroll?". But let's assume you know the image height or you will use a same size images. In this case the key of the solution is to use parent element 'div' with relative position and hidden in overflow child element 'img' with absolute position, 0 top pixel and transition property on the top. Then add hover effect on the child in your case the image with top value "image height - parent height" . you can see the jsfiddle
here is the HTML :
.img-wrapper
{
overflow: hidden;
position: relative;
float: left;
height: 300px;
width: 400px;
border:5px solid #BBB;
border-radius: 5px 5px 5px 5px;
}
.extrem-height-image
{
position: absolute;
top: 0;
width: 400px;
height: auto;
transition: top 5s ease-out 0s;
}
.extrem-height-image:hover
{
top: -300px;
}
<div class="img-wrapper">
<img class="extrem-height-image" src="http://placehold.it/400x600"/>
</div>
Good luck
If you want let img auto scroll, you must set a wrapper with specified width and height! It's not necessary to set width/height for img itself
.img-wrapper{
max-width:80px;
max-height:80px;
overflow:auto;
background:red;
}
<div class="img-wrapper"><img src="http://placehold.it/100x100"></div>
I have the following HTML structure that I'd like to keep nested:
<div class="parent">
<div class="shadow">Shadow here!</div>
</div>
CSS:
.parent {
background: blue;
z-index: 2;
height: 200px;
}
.shadow {
background: lightgrey;
z-index: 0;
opacity: 0.4;
position: relative;
top: 194px;
}
Essentially, I want the div .shadow to be underneath the div .parent. If you look at the rendering at the below link, you can see that part of the parent's blue background goes through the shadow; instead, I'd like the parent element to cover that overlapping part (stacked on top of, I guess you can say):
https://jsfiddle.net/9ya7kb67/
How could I do this? I'm fiddling around with z-index, but that isn't helping.
This is simple... give your shadow z-index property negative value like this. You can also manage z-index by giving higher value. Or you can use box-shadow property to make shadow.
.parent {
background: blue;
z-index: 2;
height: 200px;
}
.shadow {
background: lightgrey;
z-index: -1;
opacity: 0.4;
position: relative;
top: 194px;
}
You can use box shadow with CSS3 https://css-tricks.com/snippets/css/css-box-shadow/
CSS box-shadow works by creating a shadow behind an element. Thus, the element is already on top of the shadow. Here, z-index is not required.
the code:
.parent {
background: blue;
height: 200px;
box-shadow: 0 8px 0 4px light grey;
}
is doing the same thing regardless if you include z-index or not.
I'm not sure if it is the answer you are looking for, but you can always use the CSS property box-shadow on your parent to get a 'shadowy' effect.
See this fiddle here
You can find box shadow generators online to make your life easier, such as this one
.shadow requires a negative z-index value as z-index is inherited from it's parent and is comparatively displayed. z-index:0; gives it the same overall z-index the parent has, and as the child was declared after the parent, it is therefore on top. This means that by setting it to z-index:-1 you are placing the shadow behind the parent.
However, if you simply want a box-shadow I would recommend actually using CSS3 Box Shadows instead of creating additional elements.
Because the shadow is INSIDE of the parent, there is no way to make the parent appear on top of whatever is inside. This is because in CSS a child element inherits the z-index of its parent as a BASE z-index. It can have its own z-index but it can never be less than its parent.
EDIT: Box shadow solution -
https://jsfiddle.net/9ya7kb67/3/
.parent {
background: blue;
z-index: 2;
height: 200px;
box-shadow: 0 8px 0px 4px lightgrey;
}
EDIT2: I stand corrected about it being impossible to put a child below a parent. You CAN actually do this, but that is assuming that the parent does not already have a z-index set. If the parent has a z-index, THEN it is impossible to place it on top of a child.
I've been trying to place an image over a div, my div is
.my_box{
position: relative;
left: 200px;
width: 200px;
height: 200px;
background-color: white;
opacity: 0.7;
}
and then my image is
.asvp{
position:relative;
left: 300px;
top: 100px;
}
When I do this is puts the image under the div, what do i do in order to place it over the div? I know to put the image into the div but that will but the opacity onto the image which I dont want.
Try adding z-index:1 to .my_box and z-index: 10 to .asvp. Hard to peg without the HTML code though. If this doesn't work, please create a jsFiddle and I'll sort you out. :)
You should also use margins instead of left and top. For example, on .asvp remove left and top and put margin: 100px 0 0 300px;. As a general rule of thumb, I only use left, right, top, bottom on absolute elements.
why dont you give your image position:absolute; instead... that would automatically put it ontop of it
Instead of repositioning, you can keep the image inside the div without its opacity effecting its contents. If it's a solid semi-transparent background like in your example, you could use rgba value on the div like this:
background-color: rgba(255,255,255,0.7);
This and other options here:
https://stackoverflow.com/a/6780462/2909501
I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/