I want to fade the borders of an image to smoothly blend to the background image.
Like this:
All suggestions in internet are about using box-shadow inset and to set the same solid color to the parent element, but it wouldn't work for my case. Trick with box-shadow with 0.5 alpha or so it's also unuseful.
What could I do? Prefer CSS but maybe canvas and javascript could be necessary.
I would consider duplicating the image using pseudo element where I apply blur filter:
.box {
width:400px;
height:200px;
background:var(--i);
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:0;
right:0;
width:30%;
bottom:0;
background-image:var(--i);
background-position:right;
filter:blur(20px);
}
.box:after {
content:"";
position:absolute;
top:0;
left:0;
width:30%;
bottom:0;
background-image:var(--i);
filter:blur(20px);
}
<div class="box" style="--i:url(http://lorempixel.com/400/200/)">
</div>
Related
I have tried to implement a class toggle solution proposed in a prior question that I had asked and it was a great solution but when I tried to implement it on other classes the other ones are not working and I cant figure out why.
I have double checked any spelling mistake and tried to do a smaller scale code and found that it works just fine.
var click = 0
var bbtn = 0
var top2 = document.getElementById("top2");
var swoop3 = document.getElementById("swoop3");
var swoop4 = document.getElementById("swoop4");
var title2 = document.getElementById("title2");
var backbtn = document.getElementById("backbtn");
top2.onclick = function() {
top2.classList.toggle("on");
title2.classList.toggle("on");
swoop3.classList.toggle("on");
swoop4.classList.toggle("on");
}
.top2{
background-color:orange;
position:fixed;
top:25%;
left:0;
height:25%;
width:100%;
border-top-left-radius:45px;
border-bottom-left-radius:50px;
border-bottom-style:outset;
border-width:5px;
transition: height .5s, top .5s,border-bottom-left-radius.5s,border-top-left-radius.5s;
}
.top2.on{
top:0;
height:100%;
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.title2{
color:white;
font-size:40px;
position:fixed;
top:34%;
left:25%;
animation-name:title2;
animation-duration:1s;
animation-delay:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
opacity:0;
transition:top .5s;
}
.title2.on{
top:5%;
}
#keyframes title2{
100%{
opacity:1;
}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
.swoop3{
background-color:orange;
position:fixed;
top:50%;
left:90%;
height:52px;
width:50px;
transition:top .5s, height .5s;
}
.swoop3.on{
top:100%;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
.swoop4{
background-color:white;
position:fixed;
top:50%;
left:90%;
height:52px;
width:50px;
border-top-right-radius:50px;
border-top-style:inset;
border-width:5px;
transition:top .5s;
}
.swoop4.on{
top:0;
}
I want everything to toggle when clicked but only top2 toggles and nothing else
There's not much to say about your problem as you didn't provide an example of your HTML view. But there are two thing you have to check on your code.
If your HTML elements don't have the id you're specifying in your javascript like top2 or swoop3 I recomend you add them first in all your elements the way you want like this:
<div id="top2"></div>
Once you have that, you should also change your css styles to point to the elements by their id. Meaning that instead of writing .top2 you should write it as #top2. You can read more information about css selectors here. As a result, your css should look like this:
.top2 {
background-color:orange;
// ... other styles
}
.top2.on {
// ... more styles
}
Is there a way to use transform: scale() on only the background image?
What I want to do is on hover make the background scale up
html
<div class="square">
//Content in here
</div>
css
.square{
background: url('image goes here');
background-size: cover;
height: 50vw;
width: 50vw;
so I don't want the content to scale only the background image on hover
If anyone knows a way I can do this would be great
Thanks
If it's just the background-size and you're not relying on "cover" or "contain" for the initial value, then changing the background-size on hover should be enough.
If not, stacking a pseudo-element with the background while keeping your element background transparent, then using the transforms on the pseudo-element will do the trick
edit: Adding example :)
<style>
.container{
overflow:hidden;
position:relative;
}
.scalable-bg::before{
content:"";
background:url('http://lorempixel.com/600/400');
background-size:cover;
position:absolute; top:0; left:0;
width:100%; height:100%;
z-index:-1;
transition:all 1s ease;
}
.scalable-bg{
padding:2em;
color:white; text-shadow: 2px 2px 0 black;
}
.scalable-bg:hover::before {
transform: scale(2);
}
</style>
<div class="container">
<div class="scalable-bg">
<h1>
Something
</h1>
<p>
Something, something, something, darkside. Something, something, complete
</p>
</div>
</div>
https://jsfiddle.net/2kzk1acr/3/
I'm trying to make a slideshow that resizes proportionally relative to the browser window size, but nothing I try seems to work. The following HTML and CSS is what I use so the slideshow stays centered on my page when the browser window is resized, but it does not yet allow for the slideshow to be resized.
How would I go about doing this? My original thought was simply to give the #parent div a max-width or width of some percentage, but it doesn't work. I thought everything inside, as their widths are all set to 100%, should resize with the #parent div, but they don't. I'm not even sure that the #parent div is even resizing at all...
The img is simple y a placeholder for six images I have in my actual code, but that doesn't make any difference.
#parent {
height:100%;
}
.fadein {
position:relative;
top:70px;
width:100%;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -0%);
-moz-transform: translate(-50%, -0%);
}
#slideshow {
max-width:100%;
width:100%;
height:100%;
}
<div id="parent">
<div id="slideshow">
<div class="fadein">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>
.fadein img does not have width set to 100%. Also because it is absolutely positioned, the width will be referring to the width of the window. This shouldn't matter though because your parent divs are set to 100%, so either way will look the same.
Edit: also in the future when you have a layout issue, it is really helpful to put a border around your divs. As mentioned in the comments
For height: 100%; to be the height of the viewport, you heed to have height: 100% on all elements going up including <html> and <body>... Most likely, you're better off using a fixed overlay, and the measurement 100vh. You can find good info on the vh unit and what height: 100% really means here: Percentage Height HTML 5/CSS
Your img tag is what needs the resizing. It will act independently from the parent container.
#parent {
height:100%;
}
.fadein {
position:relative;
top:70px;
width:100%;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -0%);
-moz-transform: translate(-50%, -0%);
}
#slideshow {
max-width:100%;
width:100%;
height:100%;
}
#slideshow img {
width: 100%;
}
<div id="parent">
<div id="slideshow">
<div class="fadein">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>
#parent {
height:200px;
width:300px;
position:relative;
}
#slideshow {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.fadein {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%, -0%);
-moz-transform:translate(-50%, -0%);
width:100%;
height:100%;
}
I'm new at jQuery and I have a problem that when I use ID selector in CSS then my jQuery code doesn't work.
Here is HTML:
<body>
<div id="fm">
</div>
</body>
Here is JavaScript Code:
$(function () {
$("#fm").click(function () {
$(this).toggleClass("cm");
});
});
This CSS is OK and it works:
body>div{
height:100px;
background-color:blue;
transition:all ease 0.5s;
position:fixed;
top:0;
left:0;
bottom:100px;
right:0;
z-index:1000;
}
But if I use #fm in CSS selector it doesn't work. I think it may be because of cascading behavior but I don't know how to fix it.
Here is the CSS which doesn't work:
#fm{
height:100px;
background-color:blue;
transition:all ease 0.5s;
position:fixed;
top:0;
left:0;
bottom:100px;
right:0;
z-index:1000;
border:1px solid black;
}
And this is cm class
.cm {
background-color:red;
height:150px;
}
I appreciate if you help
Try
#fm.cm
for your cm rule. This way, the ID doesn't override the class
toggleClass is working, but the css properties are not applied.
You need to use !important to override proeperties.
.cm {
background-color:red !important;
height:150px;
}
Demo: https://jsfiddle.net/tusharj/ecojmyje/
Id have high priority in css
so your .cm class be override with id #fm
Use !important only work in the context
.cm
{
background-color:red !imporatnt;
height:150px;
}
Hi guys i have this code : LINK here
image in this have a link should open it when click .
but when you hover the image the url doesn't working ! (why ?)
sorry for my bad english!
<div class="entry">
<a href="http://google.com">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
</a>
</div>
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.entry:hover:after {
opacity:1;
}
You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:
div.entry:hover {
content:'Click on image for more information';
/* ... other css rules */
pointer-events: none;
}
Now your click will not be 'captured' but it 'bubbles up' to the underlying div.
But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...
Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
a:before {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a:hover:before {
opacity:1;
}
Most probably this part in your CSS is creating the problem.
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.
So now I think you had got the problem and you can solve it yourself in your way.