We Keep Coding

How to create a border around a hovered element?

I want to display a border around an element, when it is hovered. Like this image:
The issue is that I don't want add to add border or outline on the element itself because I'm allowing user to change styles and it'll affect the added outline as well.
Here is what I've tried to counter this:
Created overlay div on top of the content using position: absolute
Added a div inside it to which is also set to absolute
Added onmouseover and onmouseout listener on overlay div to get the width, height, offsetLeft and offsetTop of the element
Now the issue is that because the overlay is on top, the events are not firing on elements underneath (as I want the nested element's info as well). I've also tried setting z-index but it doesn't seem to be working as well.
So, how to achieve this?
PS: The screenshot is taken from the visual builder of Webflow but I'm not sure how they are achieving this.
Here is the code:
var outlineContainer = document.querySelector('#content-container');
outlineContainer.onmouseover = outlineContainer.onmouseout = handler;
function handler(event) {
var hoverOutline = document.querySelector('.hover-outline');
if (event.type == 'mouseover') {
console.log(event.target.tagName);
var clientRects = event.target.getBoundingClientRect();
hoverOutline.style.width = `${clientRects.width}px`;
hoverOutline.style.height = `${clientRects.height}px`;
hoverOutline.style.transform = `translate(${event.target.offsetLeft}px,${event.target.offsetTop}px)`;
}
if (event.type == 'mouseout') {
hoverOutline.style.width = 0;
hoverOutline.style.height = 0;
hoverOutline.style.left = 0;
hoverOutline.style.top = 0;
}
}
#content-container {
border: 2px solid black;
background-color: white;
padding: 50px;
position: relative;
height: 100%;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.hover-outline {
position: absolute;
border: 2px solid orange;
z-index: 6;
top: 0px;
left: 0px;
z-index: 3;
}
.content {
z-index: 4;
}
<div id="content-container">
<div class="overlay">
<div class="hover-outline"></div>
</div>
<div class="content">
<div class="component">
<label>Hi</label>
</div>
<div class="component">
<label>Text Field</label>
<span class="wrapper">
<input type="text" placeholder="Text Input Field" />
</span>
</div>
</div>
</div>

I may have misunderstood what is required, but could you just change the border color on hover? (And remove the JS).
#content-container {
border: 2px solid black;
background-color: white;
padding: 50px;
position: relative;
height: 100%;
}
#content-container:hover {
border: 2px solid red;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.hover-outline {
position: absolute;
border: 2px solid orange;
z-index: 6;
top: 0px;
left: 0px;
z-index: 3;
}
.content {
z-index: 4;
}
<div id="content-container">
<div class="overlay">
<div class="hover-outline"></div>
</div>
<div class="content">
<div class="component">
<label>Hi</label>
</div>
<div class="component">
<label>Text Field</label>
<span class="wrapper">
<input type="text" placeholder="Text Input Field" />
</span>
</div>
</div>
</div>

How to create image scrolling parallax effect with CSS?

I saw this cool scrolling effect online...
Where the image blends with the next image when scrolling through sections. I've been trying to reproduce it, but I can't seem to figure it out?
How can I create this effect on the web?
Here is the link to where I saw the effect... http://readingbuddysoftware.com/how-it-works/
I've tried using position: fixed on the screenshots with the z-index of the section higher then the image, but the last screenshot is always on the top.
Any ideas?
Update: For various reasons (including placement, using slants...), I can't use the background-image css solution. I need a solution for using the <img> element.

This can be done using background-attchement:fixed and two similar images.
Here is a simple example:
body {
min-height:200vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 20px 20px no-repeat;
background-attachment:fixed;
}
.box {
margin-top:220px;
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 20px 20px no-repeat,
grey;
background-attachment:fixed;
}
<div class="box">
</div>
That you can easily scale with many images:
body {
min-height:250vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 50px 50px/auto no-repeat;
background-attachment:fixed;
}
.box {
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 50px 50px/auto no-repeat,
grey;
background-attachment:fixed;
}
.box:first-child {
margin-top:200px;
}
<div class="box">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/11/150/150);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/106/150/150);background-color:pink">
</div>
You can also consider the use of img and position:fixed but you will need some trick to hide the overflow using clip-path
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
clip-path: inset(0);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
Or using mask
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
-webkit-mask:linear-gradient(#fff,#fff);
mask:linear-gradient(#fff,#fff);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
For better support, here is a similar idea with some JS to avoid the use of clip-path or mask
I will update the position of the image using a CSS variables but you can easily do without:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 150vh;
margin: 0;
}
img {
position: fixed;
top: 20px;
left: 20px;
}
.box {
margin-top: 220px;
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
.box img {
top: calc(-220px + 20px + var(--scroll-var));
/* margin of box + top of the other image + scroll*/
position: absolute;
}
<img src="https://picsum.photos/id/1069/150/150?grayscale">
<div class="box">
<img src="https://picsum.photos/id/1069/150/150">
</div>
With many images:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 250vh;
margin: 0;
padding-top:200px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
img.f1 {
top: calc(-200px + 50px + var(--scroll-var));
position: absolute;
}
img.f2 {
top: calc(-400px + 50px + var(--scroll-var));
position: absolute;
}
img.f3 {
top: calc(-600px + 50px + var(--scroll-var));
position: absolute;
}
<img src="https://picsum.photos/id/1069/100/100?grayscale">
<div class="box">
<img class="f1" src="https://picsum.photos/id/1069/100/100">
</div>
<div class="box" style="background-color:yellow;">
<img class="f2" src="https://picsum.photos/id/107/100/100">
</div>
<div class="box" style="background-color:pink;">
<img class="f3" src="https://picsum.photos/id/1072/100/100">
</div>

Setinterval() function need to reset

I'm trying to create section with couple images.Idea is to dynamically change those images, but my problem is: when section is loaded and animation is complete whole process stop but it should continue all over again.
Can somebody help me to achieve that?
Thank you.
Here is my code so far:
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
$slide.next().addClass('slideUp');
},2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>

You could keep the interval running, but change the way you look for the next slide: check if there is a next one, if so, take it, otherwise pick the first one:
$slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
$slide.addClass('slideUp');

Your loop is not infinite because last element do not have next() elements. You should check for that to appear and then take first element of collection instead.
Check the snippet below.
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
var $nextSlide = $slide.next();
if(!$nextSlide.length) {
$nextSlide = $('div.block').eq(0);
}
$nextSlide.addClass('slideUp');
}, 2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>

Thank you all for help I appreciate that.
Here is the another function that working properly.
Sincerly
$(document).ready(function(){
var currentIndex = 0,
items = $('.block'),
itemAmt = items.length;
function cycleItems() {
var item = $('.block').eq(currentIndex);
items.removeClass('slideUp');
item.addClass('slideUp');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 2000);
});

How to get image size with jquery (Chrome, Safari...)

I am a jquery beginner and I need to get the height of an image by jquery.
This is the code I use:
$(document).ready(function ($) {
var height = $('#testor').height();
$('.slider-container').css("height", height);
});
This is the html code:
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image" ><img src="http://xxxx.jpg" class="alignnone size-medium wp-image-1558 testor" id="testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1557 testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1556 testor" /></div>
</div>
And the css:
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img{
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position:relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
It's working fine with Firefox and IE but not in Chrome and Safari.
I found out that it is a problem with webkitbrowser.
Often it is suggested to use $(window).load instead of $(document).ready but that also doesn't work.
Does anyone have an idea how to fix it. I tried for two days to find a solution and don't know what to do now.
Best reagards
Mythos

$(document).ready(function ($) {
var myimage = document.getElementById("testor");
var w = myimage.width;
var h = myimage.height;
//Assign the variable to your jquery css
$(".slider-container").css("height",h);
});
JSfiddle

Attach load event to <img> element at .ready(); call .height() within load event handler, as the element may not be fully loaded if .height() is called before load event completes and could return 0
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img {
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position: relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function($) {
$('#testor').on("load", function() {
var height = $(this).height();
console.log(this.complete);
alert(height);
$('.slider-container').css("height", height);
console.log(".slider-container height:",
$('.slider-container').css("height"));
})
});
</script>
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image">
<img src="http://lorempixel.com/100/100/" class="alignnone size-medium wp-image-1558 testor" id="testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1557 testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1556 testor" />
</div>
</div>

Moving image on click using Javascript?

I have an image at the side of my website, i want to hide most of the image until the user clicks on it (its for a newsletter signup), what would be the best way of going about this?
I just need a section of this image showing, then whenever the user clicks on it the whole image pops out. I know i can use CSS to move the image about, what would the best javascript function to use instead of using the change image function as im only moving the image not changing it?
Example site where this is demonstrated: http://www.plus.de/

Here's a Fiddle
HTML
<div class="slide">
<span class="text">OPEN</span>
</div>
CSS
#overflow {
background: rgba(50,50,50,0.5);
display: none;
width: 100%;
height: 100%;
}
.slide {
background: #0296cc;
position: absolute;
top: 200px;
left: -270px;
width: 300px;
height: 180px;
z-index: 9999;
}
.text {
display: block;
width: 180px;
margin: 80px 0 0 196px;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
color: #fff;
cursor: pointer;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
jQuery
$(function() {
$('.slide').click(function() {
var overflow = ('<div id="overflow"><div>');
$(this).stop().animate({ left: '0' }, 650);
if($('#overflow').length < 1) {
$('body').append(overflow);
}
$('#overflow').fadeIn('slow');
$('#overflow').click(function() {
$(this).fadeOut('slow')
$('.slide').stop().animate({ left: '-270px' }, 650);
});
// Prevents window scroll when overflow is visible
$('#overflow').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
});
});

BASIC DEMO
<div id="gallery">
<img src="images/img1.jpg" alt="" />
<img src="images/img2.jpg" alt="" />
<img src="images/img3.jpg" alt="" />
<img src="images/img4.jpg" alt="" />
<div id="tabs">
<div>Tab 1</div>
<div>Tab 2</div>
<div>Tab 3</div>
<div>Tab 4</div>
</div>
</div>
CSS:
#gallery{
position:relative;
margin:0 auto;
width:500px;
height:200px;
background:#eee;
}
#gallery > img{
position:absolute;
top:0;
margin:0;
vertical-align:middle;
}
#gallery > img + img{
display:none;
}
#tabs{
position:absolute;
top:0px;
right:0;
height:200px;
width:100px;
}
#tabs > div{
cursor:pointer;
height:49px;
border-bottom:1px solid #ddd;
}
jQuery
$('#tabs > div').click(function(){
var i = $(this).index();
$('#gallery > img').stop().fadeTo(300,0).eq(i).fadeTo(500,1);
});