I want to mask out part of an image on a page, making part of the image darker so a highlighted portion stands out. (This is often used to preview the effect of the crop tool in photo editors.)
Currently, my plan involves loading two copies of the images on top of each other and using clip: rect(); to slice out of a portion of the top image. Is there a better way to handle this? I should also mention that my image is actually an animated GIF (oh dear ...)
I thought it best to figure this out before I started trying to update the crop with javascript.
CSS:
.container {
width: 1075px;
margin: 10px;
border: 1px solid black;
padding: 10px;
overflow: auto;
}
.image-container {
position: relative;
clear: both;
background-color:#eee;
}
.background{
opacity:.40;
}
.highlight {
position: absolute;
top: 0px;
left: 0px;
clip: rect(126px 257px 197px 156px);
}
HTML:
<div class="container">
<div class="image-container">
<img class="background" src="animate.gif" width="1075" height="605" />
<img class="highlight" src="animate.gif" width="1075" height="605" />
</div>
</div>
Position the image using position: absolute for each image. The layer above should be smaller then the bottom one. Than use background-position: x y;
Something like this:
#image1, #image2 {
position: absolute;
left: 0;
top: 0;
background: url('https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif')
}
#image1 {
min-width: 276px !important;
min-height 110px !important;
opacity: 0.5;
}
#image2 {
left: 251px;
width: 25px;
height: 110px;
background-position: 100% 100%;
}
Look here an example:
http://jsfiddle.net/8n3Rr/
Try to position a <div> over the images, put a low opacity on it and a width or height half the size of the image.
Related
Please, don't say anything like OH THERE ARE A LOT OF ANSWERS OUT THERE. I founded a lot of them, but none of them worked. This is HTML:
<img src="images/ONamaImg.png" class="main-page-img"> (not all of the HMTL of course, only pic code)
And here is CSS:
.main-page-img
{
filter: grayscale(100%) blur(10px);
float: right;
width: 550px;
height: 700px;
z-index: -1;
border-radius: 1000px 0px 0px 1000px;
margin-top: -350px;
box-shadow: 0px 0px 30px #777777;
overflow:hidden;
}
Thanks!
First, wrap the image in a container :
<div class="container">
<img src="path/to/image.jpg">
</div>
Then, add these css rules to the container and image:
.container {
overflow: hidden;
height: /*add height*/;
width: /*add width*/;
}
img {
margin: -10px;
}
Note: I didn't add other styles. Make sure to add them.
The basic concept is to wrap the blurred image in the container and clip the blurred edges using negative margins.
I also found a lot of answers that don't seen to solve the problem.
Here is my attempt:
HTML
First I created a container and added an image to use as the crisp border.
<div class="container">
<img class="border-img" src="https://pbs.twimg.com/profile_images/2209676047/gatinho-5755_400x400.jpg" />
<div class="blur-img"></div>
</div>
CSS
Then I use the same image as a background to an epty div inside the container. Within the div backgroud I can scale and adjust the images to make then appear like one.
.container {
width: 450px;
height: 500px;
overflow:hidden;
}
.blur-img {
width: 70%;
height: 70%;
background-image: url("https://pbs.twimg.com/profile_images/2209676047/gatinho-5755_400x400.jpg");
background-position: center;
transform: scale(1.2); /* use scale to zoom image */
filter: blur(10px);
position:relative; /* adjust position */
left:15%;
top:15%;
}
.border-img {
width: 450px;
height: 500px;
position:fixed;
}
Output
And the output looks like this:
What I am trying to accomplish:
- create a pop-up div (fixed), centered in view
- this pop-up should be 60% height of the browser window
- the contents of the pop-up should be an image and a 'x' above the upper right corner of the image
- the height of the image should be maximal, considering it should be contained in the div together with the 'x'
- the aspect ratio of the image should be maintained
I tried the following code
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>
With CSS:
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
text-align: right;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
This code is not solving the problem, the image is not contained in the (yellow) div, as can be seen in the following screen shot:
http://www.michielvisser.nl/tmp/screenshot.jpg
How to contain the image in the div with maximal height for the image in the div and maintain aspect ratio?
SOLUTION 1: Remove the height and width from .pop-up and change height:100% in .image to height:60vh. That works perfectly. Apparently the child (img) will not adjust to the parent (div), but the parent (div) will adjust to the child (img). Sounds like real life.
SOLUTION 2: Essentially the problem arises when the window is resized (except in firefox). The solution can be to redraw the image after a resize, this solves the problem:
$(window).resize(function(){
$('img').hide();
setTimeout(function(){ $('img').show(); }, 1);
});
Your problems are:
You have an inline width and height set on your image, which is overriding the CSS styles for width and height on that image
The margin from your X is pushing the image down since the X is wrapped in a <p> tag.
You don't need object-fit at all.
The simple way to solve #1 is to delete the inline width and height from the image tag and leave it to the stylesheet.
Number 2 can be solved by wrapping the X in a div instead of a p, or you can use a pseudo element for it. I have taken the latter approach in the snippet below.
To solve #3, just delete the style from the stylesheet. (Having this property set in Safari actually messed things up for me.)
This snippet is tested in Safari 10.1.1. Note how the placeholder image is quite large by default (1000x800), but it only displays as big as it can per the parent div.
Edit: Based on your comments, let's revise this further so that we dictate the size on the image, and just let the wrapper take up the size of the image.
So on our image, in order to get it to be 60% as tall as the screen, we can do:
img {
height: 60vh;
width: auto;
}
Then, in our parent, we won't specify a width or height at all, but we can do display: flex just to make sure it is big enough to fit its contents.
body {
background: #333;
}
.pop-up {
display: flex;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: yellow;
}
.exit {
color: black;
text-decoration: none;
text-align: center;
font-size: 300%;
display: block;
position: absolute;
top: -50px;
right: -40px;
width: 40px;
height: 50px;
}
.image {
height: 60vh;
width: auto;
opacity: 0.7;
}
<div class="pop-up">
X
<img class="image" src="http://placehold.it/1000x800" alt="" title="">
</div>
I put the image above the P tag and added some CSS to .exit-button and .image
From here you can adjust padding and sizing of the elements.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
position: absolute;
text-align: right;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" />
<p class="exit-button">x</p>
</div>
I copied your code and edited it. Please tell me whether this is the output you wanted or not.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
padding-top: 30px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
margin-top: -50px;
text-align: right;
margin-right: 0;
font-size: 300%;
}
.image {
margin-top: -20px;
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" alt="" title="" />
</div>
Because of either needing to hardcode in the alignment of the image given the size or deal with weird convolution, I believe this is the best way:
Create a fixed overlay occupying the entirety of the screen, create a container of 60% height, align it in the center with flexbox and stick the image inside making it occupy the entire height. The aspect ratio will update automatically (only happens with height).
As for the button – give it absolute positioning and a right position of 0, and manually give the parent relative positioning (this is necessary).
<div id="popup">
<div id="container">
X
<img src="https://i.redd.it/gelilvo30mgz.jpg">
</div>
</div>
html,
body {
height: 100%;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
position: relative; !important // has to be specified for the children (anchor) to find the bound
height: 60%;
background: #333;
}
a {
right: 0;
position: absolute;
}
img {
height: 100%;
}
https://jsfiddle.net/L2nLjjxc/1/
I believe that's the least amount of convolution if you want it to be dynamic.
I recently have created this banner for my website, but I realized that I only want the main part of my site to be 900px long. However, I want the banner to run off the page, but have the part where it runs off be darkened (through opacity). So, this means, I need to make the image of my site positioned in the middle. Here is what I developed so far:
https://jsfiddle.net/h3w89t9y/4/
As you can see, this doesn't really get what I need. Here's the issue:
.banner {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
The banner isn't 800px. If I add in a width of 800px, it will go to the middle just like I wanted. However, the image will be limited to only be 800px long rather than overflowing off of 800px.
This is what I'm trying to get it to look like:
https://i.gyazo.com/c38cae7bd34379477a6fcc8eeb160c22.png
How do I make it to where my banner is centered to the middle, but has the sides overlapped with opacities?
You can achieve what you want using pseudo like this:
body {
margin: 0;
}
.wrapper {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat center;
width: 100%;
}
.wrapper:before, .wrapper:after {
content:'';
width: calc((100% - 900px) / 2); /*setting the width to the 100% minus your desired header's width / 2 so it will occupy the rest of your content*/
height:185px;
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.3); /*set the desired opacity*/
}
.wrapper:before {
left: 0;
}
.wrapper:after {
right: 0;
}
.banner {
width: 900px;
height:185px;
margin: 0 auto;
}
<div class="wrapper" style="">
<div class="banner"></div>
</div>
So the idea is your pseudo elements occupy the rest of the content and setting them your desired transparency, notice that in this way you also can set them blur or whatever filter that you want.
Here a working jsfiddle to play with
You can't control opacity of a single background like that, you need another element. For example:
.banner, .bannert {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
.banner {
max-width: 800px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.bannert {
background-repeat: repeat-x;
opacity: 0.5;
}
<div style="width: 100%; background: black; padding: 1px;position: relative;">
<div class="bannert"></div>
<div class="banner"></div>
</div>
https://jsfiddle.net/h3w89t9y/6/
Try this; add two divs first, one for the left side, and one for the right,hence you can apply your desired opacity to them and make the banner sides filtered, look at the snippets below;
HTML
<div style="width: 100%; padding: 1px;">
<div class="banner">
<div class="trans_right"></div>
<div class="trans_left"></div>
</div>
</div>
CSS
.trans_right {
padding: 2rem;
width: 13%;
float: right;
background: rgba(71,67,255,0.9);
height: 65%;
}
.trans_left {
padding: 2rem;
width: 13%;
float: left;
background: rgba(71,67,255,0.9);
height: 65%;
}
I'm really not sure if there is a better way to do this, but it gives you what you're looking for, checkout the link:
Transparent Sides
I have a content div with a ragged border (using a border-image) and I place another div each below the content div left and right to hold an image. This image is supposed to have a link. While the image shows nicely through the border the link area gets hidden by it. Given that my ragged border is rather wide (almost 100px), this feels quite confusing. Therefore I would like to "float" the image below the border and the actual link area above so that the link is clickable as well were the image is under the border or visible through the border.
Despite not having the background-image uploaded the effect becomes visible since the border is wide black. The structure includes a minimal header, which is not vital to the problem but is part of the root structure.
Another problem is that the link area expands to more than the wrapped image in height, however this is a minor issue.
http://jsfiddle.net/hc3jrkku/
Basestructure:
<header>
<nav>
<a href='?p=faq#faq' id='faq'>
FAQ
</a>
</nav>
</header>
<div class='leftSide'>
<a href="#anchor" class="bgImage"><img src="img/some.png" style="
position: relative;
z-index: -1;
opacity: .99;
border: 1px solid red;
width: 150px;
height: 200px;
background-color: red,
"></a>
</div>
<div class='rightSide'>{$right}</div>
<main>
<div class='container'>
{$content}
</div>
</main>
</body>
CSS:
* {
box-sizing: border-box
}
body {
margin: 0;
}
.leftSide{
position: fixed;
z-index: 0;
top: 20px;
right: 50%;
transform: translateX(-50%);
width: 808px;
height: 100%;
display: flex;
justify-content: flex-end;
margin-right:-93px;
padding: 15px 93px 90px 0;
}
.rightSide{
position: fixed;
z-index: 0;
top: 20px;
left: 50%;
transform: translateX(50%);
width: 808px;
height: 100%;
margin-left:-93px;
padding: 15px 0 90px 93px;
}
a.bgImage {
z-index:900;
opacity:.99;
border:2px dashed blue
}
.rightSide .bgImage {
margin-left: -93px;
}
.leftSide .bgImage {
margin-right: -93px;
}
main {
width: 808px;
min-height: 400px;
margin: 20px auto 0;
position: relative;
z-index: 50;
border-style: solid;
border-width: 0px 93px 127px 93px;
border-image: url(img/paperedge.png) 0 93 127 93 fill round;
padding-top:10px;
}
header {
height: 20px;
background: #ffffff url(img/header_bg.png) repeat-x bottom;
border-bottom: 1px solid #000000;
position: fixed;
width: 100%;
top: 0;
z-index: 100
}
nav {
display: flex;
justify-content: center;
}
Having read http://philipwalton.com/articles/what-no-one-told-you-about-z-index/, I tried creating new context(s) as well, and stripping the divs containing left/right background image of the z-index, However my current code depends on the transform/position thus creating a new context for the parent element either way. Is the sandwich stacking (some children above other parts of the page/others below) possible anyways?
If you want the image to be behind the border (or your content div), you can add this to the CSS of your div in the front:
main {
pointer-events: none;
}
This will kill the events on your div and make the behind events visible in the front: DEMO
You can also search more and find these similar topics:
HTML "overlay" which allows clicks to fall through to elements behind it
HTML/CSS: Make a div "invisible" to clicks?
I'm trying to set quite a complex border image to my website. I can't make it a background-image because it's actually a border for a slide and the slide content has to go UNDER the border when it actually slides, and with background image I assume the content will just go above it.
So, basically I need help how to make this a border image for a div maybe. OR if there is a better approach then making this a border, let me know please.
Thank you.
Doing a transparet png image is not html, you need to do it with a software such Photoshop or Gimp else you can do it with messing around with divs
<style>
.screen {
height: 422px;
width: 820px;
}
.back {
position: absolute;
height: 422px;
width: 820px;
background-image:url('test.png');
}
.content {
position: absolute;
height: 320px;
width: 672px;
margin-left: 73px;
margin-top: 56px;
border-radius: 50px;
overflow:hidden;
}
</style>
<div class="screen" >
<div class="content" >
put here what ever you want to put inside
</div>
<div class="back" ></div>
</div>
this work with me with your image
You could use the before/after psuedo elements to attach your unusual "border" as a background image.
div.slide {
background: yellow;
position: relative;
}
div.slide:before {
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
background: url(slide-bg.png) no-repeat;
background-size: 100% 100%;
z-index: 1;
}
http://jsfiddle.net/kTgJJ/
The demo uses an opaque to transparent gradient so you can see the effect. Your image just needs to have transparent areas for the text to show through, and opaque areas where it shouldn't. Add paddings to the .slide as appropriate.