The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/
Steps that I followed:
I found no way to blur a background image, so I inserted an image within a <div> with an id="background".
And then modified the CSS of it as:
#background{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.
Obviously, when I hover over it, the entire image gets clear.
But the goal is to clear the area where the mouse pointer overs at.
I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.
But I'm clueless on how to code it.
https://github.com/thdoan/magnify
A simple way would to use magnify to zoom over the already blurred image.
$(document).ready(function() {
$('.zoom').magnify();
});
img {
-webkit-filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>
<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">
Here is a pure JS solution that rely on clip-path and CSS variables, the idea is to duplicate the images to have one blurred and one not. Then we reveal the non-blurred one on the top:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
width:400px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:before {
filter:blur(5px) grayscale(60%);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/400/200?image=1069)">
</div>
With this solution you can easily do the oppsite if you want to blur a part of the image on hover:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
margin:50px;
width:200px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:after {
filter:blur(5px);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/200/200?image=1069)">
</div>
Related
I have grid class in javascript and when hover on some areas, an different image displays. I want this image to fade in/ fade out when displayed.
Hereby an exemple of the effect (could't figure out how it was made) : https://dustinthierry.com/
I am not sure how I should do it, as I am not directly using the CSS :hover .
Any leads ?
for (let i = 0; i < hovergrid.length; i++) {
if (hovergrid[i].hover(mouseX, mouseY)) {
console.log("hover on " + i)
hovergrid[i].display(i)
}
}
display(number) {
this.img = document.getElementById("displayedimage")
this.img.style.display = "block"
this.img.src = "images/" + number + ".jpg"
this.img.style.right = this.posx + "px"
this.img.style.bottom = this.posy + "px"
this.img.alt = picdes[number]
#displayedimage {
display: none;
position: absolute;
width: 30%;
}
You could use plain CSS for that effect. Using plain CSS will simplify your code, and also let you use CSS transitions.
Here's a rundown of what you could do:
Put your normal elements inside a Div (as in the OPULENCE text in the example)
Make your Div's position Relative. This will allow you to position certain elements inside of it, inside the dive
Create an overlay element that that is normally transparent
Put your images inside the overlay and make them invisible: opacity:0
Upon the hover of your overlay element, you can change the opacity of the image inside of it: div.overlay:hover > img {opacity: 1}.
.container{
width:500px;
height:500px;
background:black;
overflow:hidden;
position:relative;
}
h1{
text-align:center;
color:#ffffff;
margin-top:30px;
}
.overlay{
width:100%;
height:100%;
background:transparent;
position:absolute;
top:0;
left:0;
}
.overlay img{
width:200px;
position: absolute;
bottom:50px;
right:20px;
transition: all 0.5s;
opacity:0;
}
.overlay:hover > img{
opacity:1;
}
<div class="container">
<h1>Some text here</h1>
<div class="overlay">
<img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
</div>
</div>
Please note that because of the positionings, your overlay doesn't necessarily have to contain the whole element. It can be in a place, totally irrelevant to the image.
Also if you want to have more than one image, you can split your overlay into more inner elements that each have an image, and do the same thing for all of them.
This cleans up your Javascript and gives you all the CSS functionalities needed.
I need to make a image revealing section on my page.
Here, I can show the just the shape of the transparent image using brightness and then later remove the brightness to reveal the image.
By default i get a black shape using brightness as seen in my snippet. I need to do the same thing but by changing the color for shape. I need to show the shape of the transparent image with a different color, red in my case.
How can I do this using css and/or javascript?
.mask-img{
width:50%;
filter: brightness(0);
}
<div class="container">
<img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>
Use mix-blend-mode. The coloration and the value of the blend will depend on each case so you need to adjust it based on the image.
.mask-img {
width: 50%;
}
.container {
position:relative;
z-index:0;
background:#fff;
}
.container:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:red;
mix-blend-mode:hue; /* or 'color' to get a different effect */
opacity:1;
transition:0.5s;
}
.container:hover::after {
opacity:0;
}
<div class="container">
<img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>
I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?
I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.
<div id="dimmer"></div>
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.
.area-to-dim {
position: relative;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
HTML
<div class="area-to-dim">
<div class="dimmer"></div>
</div>
Two ways, one really simple but I'm not 100% sure this is what you wanted.
First way, use CSS
.genericClassGivenToDivs, #idOfDiv {
background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
background:#aaa;
}
The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.
<html>
<head>
<style>
body {
margin:1em;
background:#ddd;
}
#contain {
margin:auto;
width:100%;
max-width:720px;
text-align:center;
}
#row1, #row2, #row3 {
width:100%;
height:48px;
line-height:48px;
color:#000;
background:#fff;
}
#row2 {
background:#eee;
}
#dim {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
//console.log('over:['+ this.id +']');
dimEl.style.top = this.offsetTop +'px';
dimEl.style.left = this.offsetLeft +'px';
dimEl.style.height = this.offsetHeight +'px';
dimEl.style.width = this.offsetWidth +'px';
dimEl.style.display = 'block';
}
window.onload = function() {
var list = ['row1', 'row2', 'row3'];
var e;
for(x in list) {
e = document.getElementById(list[x]);
if (e) {
e.onmouseover = over;
}
}
}
</script>
</body>
</html>
Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.
I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.
I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.
Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.
If this sounds applicable, see this jsFiddle
Why the display is none?
Check this?
#dimmer {
background: #111;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 9999;
/* may not be necessary */
}
#dimmer:hover {
background: #000;
opacity: 0.5;
transition: opacity 1s ease;
cursor: pointer;
}
<div id="dimmer">ok</div>
I tried to do an overlay for images, but I have 2 problems:
$(document).ready(function () {
$('#boximmagini img').click(function(){
$("#immagine img:last-child").remove()
var source= $(this).attr('src');
$('#immagine').append("<img src="+source+"/>")
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
$("#overlay").click(function(){
$(this).fadeOut('fast');
$('#box').hide();
});
});
.chiudi{
cursor:pointer;
}
.overlay{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
}
#box{
width:600px;
height:400px;
display:none;
z-index:+300;
position:absolute;
left:30%;
top:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
<div class="chiudi">CHIUDI</div><br>
<div id="immagine"></div>
</div>
<div id="boximmagini">
<div><b>Clicca</b></div>
<img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>
PROBLEMS:
I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)
I hope that you can help me!
Sorry for my english
Thanks!
I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/
#box{
width:600px;
height:400px;
display:none;
z-index: 300;
position:absolute;
top:20%;
left:50%;
transform: translate3d(-50%,0,0);
}
#box img{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
}
I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions
Hope this helped you.
I currently have a mobile website project in which I'm creating panels such that one panel can be viewed at a time, where when a user swipes left or right, the panel slides offscreen and a new panel slides in. Everything works fine on Android, and even behavior is acceptable on iPhone.
However, scrolling on iPhone seems to lack momentum. In other words, when "flicking" the panel up / down, it scrolls on Android natively, but on iPhone it seems to lose momentum very quickly. I'd like to find a simple CSS or combo CSS / JS solution that works, without including additional libraries if possible.
Here's the basic structure of the site:
<html>
<head>Head stuff here</head>
<body>
<div class="container">
<div class="headbox">Fixed position menu here</div>
<div id="pages">
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
</div>
<div class="bottommenu">Fixed position bottom menu here</div>
</div>
</body>
</html>
Here is the basic CSS:
body {
width:100%;
overflow-x:hidden;
font-size:17px;
border-collapse:collapse;
}
.container {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
/*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
height:2.3529em;
width:100%;
top:0;
position:fixed;
text-align:center;
color:#fff;
z-index:1;
}
#pages {
width:100%;
height:100%;
white-space:nowrap;
font-size:0;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
position:relative;
-webkit-transform:translate3d(-100%,0,0);
-moz-transform:translate3d(-100%,0,0);
-ms-transform:translate3d(-100%,0,0);
-o-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}
.page {
width:100%;
height:100%;
display:inline-block;
vertical-align:top;
position:relative;
white-space:normal;
background:#fff;
font-size:17px;
}
.bottommenu {
position:fixed;
bottom:0;
left:0;
width:100%;
height:.2em;
transition:height 400ms;
-webkit-transition:height 400ms;
-moz-transition:height 400ms;
-ms-transition:height 400ms;
-o-transition:height 400ms;
z-index:1;
}
And finally, the listener for scrolling, which shouldn't interfere with CSS or the ability to repaint, but maybe I am missing something:
var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
that.direction = 'vertical';
that.moving = true;
if (that.scrolling) { clearTimeout(that.scrolling); }
that.scrolling = setTimeout(function() {
that.direction = false;
that.sliding = 0;
that._getMore();
that.moving = false;
},500);
}
});
Any ideas? I've tried numerous variations of -webkit-overflow-scrolling:touch;, overflow-y:scroll;, and other possible hacks / fixes / supported syntax, but nothing seems to help. I need the content to scroll within the body tag so that on iPhone the screen resizes itself on scroll, otherwise I'd use a scrollable div. This is not an option.
I guess problem with loss of native elastic scrolling within container with position: relative; overflow: hidden.
Try -webkit-overflow-scrolling: touch; for .container.