We Keep Coding

How to replicate a sliding search bar similar to the one on Petfinder

I try to create something similar to Petfinder search menu.
The problem I'm stuck with is that I can't figure out how to make a slide always appear just before the button(only covering it and not propogate to its borders when I change the size of the screen). When the slide search meets the 'heart' element it should act like it hits a wall and not going through it. So the search menu should appear before the button and replacing the previous content from the left side. I tried many options, included hiding this menu by setting width to 0 vw and heigt to 0 vh and positioning it fixed but it wasn't the case. Look at this picture. When I click the search button the menu appears but how to make it appear right from the button and not from the right edge of the screen as it does now? (see the code below)
The second question is how to incorporate this search to a css flow so it all will act as a flex element as a whole when the size of the screen changes? Because right now this slide not shrink when I change width of the screen.
But my search always gets one width. It gets confusing when the size of the screen gets smaller. It results in elements overlaying one another.
const slide = document.getElementById('slide');
let open = true;
document.getElementById('btn').addEventListener('click', (event) => {
if (open) {
slide.classList.add('show')
}
})
.parent {
background-color: #EEE;
font-family: sans-serif;
font-size: 20px;
padding: 25px;
margin: 0;
overflow: auto;
display: flex;
}
.first,
.second,
.third {
padding: 30px;
}
.first {
background-color: salmon;
flex-basis: 120px;
}
.second {
background-color: yellow;
flex-grow: 1
}
.third {
background-color: #56D7F7;
flex-grow: 1
}
.btn {
background-color: red;
cursor: pointer;
}
.slide {
display: flex;
transform: translateX(100%);
background-color: #FFE689;
top: 0;
position: relative;
transition: transform .3s
cubic-bezier(0, .52, 0, 1);
}
.show {
transform: translateX(80%);
}
<div class='parent'>
<div class='first'>1</div>
<div class='second'>2</div>
<div id='btn' class='btn'>Button</div>
<div class='third'>3</div>
</div>
<div id='slide' class='slide'>
Hello
</div>
The picture above shows how it should look like.
The code here is just for the sake of example, I am doing it on React but the problem is clear.

Well other than inspecting the elements on petfinder's website and deconstructing their styles, this is a rough version that I think performs as you are specifying.
const searchBar = document.querySelector('#search-bar');
const openBtn = document.querySelector('#open-btn');
const closeBtn = document.querySelector('#close-btn');
const brand = document.querySelector('#brand');
openBtn.addEventListener('click', (e) => toggleSlider() );
closeBtn.addEventListener('click', (e) => toggleSlider() );
function toggleSlider(){
searchBar.classList.toggle('open');
brand.classList.toggle('open');
}
.example{
max-width:600px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
}
.example .btns{
width:100px;
}
.slide-area{
width:100%;
padding:10px;
background-color: #fff;
display:flex;
align-items:center;
justify-content:space-between;
position: relative;
height:50px;
overflow:hidden;
}
.brand{
z-index:100;
transition:all 1s ease;
}
.brand.open{
color:white;
}
.search-bar{
display: flex;
justify-content:flex-end;
align-items:center;
background-color:purple;
position:absolute;
padding:10px;
right:0;
top:0;
left:0;
bottom:0;
transform: translateX(100%);
transition:all 1s ease;
}
.search-bar form{
display:flex;
justify-content:space-between;
align-content:center;
}
.search-bar input[type="text"]{
margin-left:10px;
}
.search-bar.open{
transform: translateX(0);
}
<header class="example">
<div class="slide-area">
<div id="brand" class="brand">Petfinder</div>
<nav>Menu Stuff</nav>
<button id="open-btn">Search</button>
<div id="search-bar" class="search-bar">
<label>Search:</label>
<form>
<input type="text"/>
<input type="submit" value="search"/>
</form>
<button id="close-btn">X</button>
</div>
</div>
<div class="btns">Heart</div>
<div class="btns">Sign up</div>
<div class="btns">Log in</div>
</header>

Reveal/slide image using clipaths

I am looking to create an animation that slide an image but not using the traditional slide CSS animations, this not achieve the result I am looking for, so basically the animation contains 2 images, the two images are similar (contains the same content as the same sizes) but colors are inverted.
The code I implemented only slide the image to left or right, I'd like to do the same animations but keeping the image in the same place, like when it slides it reveals the background image content as it progress but colors inverted.
I was thinking to apply the animation to clipath crop rather than actual image, below is a working jsfiddle of the issue I am facing.
$(".btn").click(function() {
$(".reveal").toggleClass("show");
})
html,
body {
background-color: #333;
color: #fff;
width: 100%;
height: 100%;
text-align: center
}
.reveal {
overflow: hidden;
position: relative;
display: inline-block;
}
.reveal:after {
content: " ";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/UBOmQ7T.jpg');
z-index: 2;
transition: all 2s ease;
}
.reveal.show:after {
left: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reveal">
<img src='https://i.imgur.com/R6978y3.jpg' />
</div>
<br />
<button class="btn">Reveal!</button>
https://jsfiddle.net/v7fte3m8

You can do this with multiple background. The trick is to make background-clip of one of them to be content-box then adjust the padding to create the reveal effect:
.box {
width:300px;
height:200px;
box-sizing:border-box;
background:
url('https://i.imgur.com/UBOmQ7T.jpg'),
url('https://i.imgur.com/R6978y3.jpg');
background-clip:
content-box,
padding-box;
background-size:cover;
background-position:center;
transition:1s all;
padding-left:0;
}
.box:hover {
padding-left:300px;
}
<div class="box">
</div>
In case you will always have image with inverted colors you can consider the original image and the invert() filter:
.box {
width:300px;
height:200px;
box-sizing:border-box;
background:
url('https://i.imgur.com/R6978y3.jpg');
background-size:cover;
background-position:center;
}
.box:before {
content:"";
display:block;
height:100%;
background:inherit;
background-clip:content-box;
box-sizing:inherit;
transition:1s all;
padding-left:0;
filter:invert(1);
}
.box:hover:before {
padding-left:300px;
}
<div class="box">
</div>

My two CSS animations happen at the same time. How do make it so one only happens after the other is completely finished?

I have a sliding side menu bar. I made two of them. One with a menu icon you can click to close it and open the other menu bar with a close icon.
The problem is my JS code and also the CSS transition animation don't give enough time for one to close before the other start to expand. So the two menu bars meet in the middle and create a messy animation.
function closeIt(){
document.getElementById('mysidenav').style.width='0px';
document.getElementById('mysidenav2').style.width='20%';
}
function openIt(){
document.getElementById('mysidenav').style.width='20%';
document.getElementById('mysidenav2').style.width='0px';
}
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
.sidenav{
height:100%;
width:20%;
background:#111;
transition:1s;
overflow-x:hidden;
}
.sidenav a{
font-size:90px;
color:#818181;
}
/*SECOND SIDE BAR*/
.sidenav2{
height:100%;
width:0%;
background:#111;
overflow-x:hidden;
position:fixed;
top:0;
transition:1s;
}
.sidenav2 a {
font-size:50px;
color:#818181;
}
<div id='mysidenav'class='sidenav'>
<a onclick='closeIt()'>&times<a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a onclick='openIt()'>&#9776<a>
</div>

You need to set a delay on the transition:
transition-delay:1s;
The problem is that this will apply when opening and when closing. So to fix that, add and remove a CSS class instead of poking at the width directly:
.hidden-sidenav {
width:0;
transition-delay:0s;
}
In the example below, I've also added transition-timing-functions so the closing speeds up over time, and the opening slows down. And reduced the timings a bit. Looks nicer that way.
function closeIt(){
document.getElementById('mysidenav').classList.add('hidden-sidenav');
document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
}
function openIt(){
document.getElementById('mysidenav').classList.remove('hidden-sidenav');
document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
.sidenav{
height:100%;
width:20%;
background:#111;
transition:0.4s;
transition-delay:0.4s;
transition-timing-function:ease-out;
overflow-x:hidden;
}
.sidenav a{
font-size:90px;
color:#818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
height:100%;
width:20%; /* Changed to 20%: visible by default. */
background:#111;
overflow-x:hidden;
position:fixed;
top:0;
transition:0.4s;
transition-timing-function:ease-out;
transition-delay:0.4s;
}
.sidenav2 a {
font-size:50px;
color:#818181;
}
.hidden-sidenav { /* Must come after .sidenav and .sidenav2 to override them. */
transition-delay:0s;
transition-timing-function:ease-in;
width:0;
}
<div id='mysidenav'class='sidenav'>
<a onclick='closeIt()'>&times<a>
</div>
<div id='mysidenav2'class='sidenav2 hidden-sidenav'>
<a onclick='openIt()'>&#9776<a>
</div>

The most performant way to do this is with CSS. Add a transition-delay.
.sidenav2{
transition-delay: 1s;
}

function closeIt(){
document.getElementById('mysidenav').style.width='0px';
setTimeout(function () {
document.getElementById('mysidenav2').style.width='20%';
}, 1000);
}
function openIt(){
document.getElementById('mysidenav2').style.width='0px';
setTimeout(function () {
document.getElementById('mysidenav').style.width='20%';
}, 1000);
}
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
.sidenav{
height:100%;
width:20%;
background:#111;
transition:1s;
overflow-x:hidden;
}
.sidenav a{
font-size:90px;
color:#818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
height:100%;
width:0%;
background:#111;
overflow-x:hidden;
position:fixed;
top:0;
transition:1s;
}
.sidenav2 a {
font-size:50px;
color:#818181;
}
<div id='mysidenav'class='sidenav'>
<a onclick='closeIt()'>&times<a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a onclick='openIt()'>&#9776<a>
</div>
Just add the setTimeout that is equal to your transition time.

You can do it with setTimeout(), like this:
function closeIt() {
document.getElementById('mysidenav').style.width = '0px';
window.setTimeout(function() {
document.getElementById('mysidenav2').style.width = '20%';
}, 1000);
}
function openIt() {
document.getElementById('mysidenav2').style.width = '0px';
window.setTimeout(function() {
document.getElementById('mysidenav').style.width = '20%';
}, 1000);
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.sidenav {
height: 100%;
width: 20%;
background: #111;
transition: 1s;
overflow-x: hidden;
}
.sidenav a {
font-size: 90px;
color: #818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2 {
height: 100%;
width: 0%;
background: #111;
overflow-x: hidden;
position: fixed;
top: 0;
transition: 1s;
}
.sidenav2 a {
font-size: 50px;
color: #818181;
}
<div id='mysidenav' class='sidenav'>
<a onclick='closeIt()'>&times<a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a onclick='openIt()'>&#9776<a>
</div>

jQuery + CSS, remove other images on hover with a fade-like transition

Firstly, What I'm trying to accomplish is when you hover over a thumbnail on the lower left, the other thumbnails will become black. However, what I have now seems wierd as the other images flashes back too quick and has no transition.
Secondly, when you transition between thumbnails, I would like when you hover over a "blackened" image, the image will return with a transition, just like what I have at the bottom of my fiddle example.
I'm sorry for the slight confusion since it's two things combined, but I hope I explained it right.
$('.thumb-box').click(function() {
var theSRC = $(this).find('img').attr('src');
$(this).parents('.image-wrapper').find('.main-image').attr('src', theSRC).fadeIn();
});
//Resize image
$('.thumb-box').hover(function(){
$(this).siblings().find('.child-img').addClass('add-active');
}, function(){
$(this).siblings().find('.child-img').removeClass('add-active');
});
$('.main-image').each(function() {
if ($(this).height() > 550) {
$(this).addClass('higher-than-max');
} else if ($(this).height() <= 550) {
$(this).addClass('not-higher-than-max');
}
});
.parent{
border:1px solid purple;
height:100%;
width:80%;
float:Right;
}
.child{
border:1px solid red;
height:100%;
background:gray;
text-align:center;
}
.child-img{
display:inline-block;
max-width:100%;
margin:0 auto;
}
.image-wrapper{
width:100%;
background:orange;
}
.thumbnails img{
width:auto;
height:100%;
width:100%;
}
.thumbnails{
width:100px;
height:100px;
}
.thumb-box{
height:40%;
width:40%;
display:inline-block;
background:black;
}
.higher-than-max{
max-height:500px;
width:auto;
}
.not-higher-than-max{
max-height:100%;
width:auto;
}
.add-active{
transition:2s;
display:none;
}
.boxes{
height:100px;
width:100px;
background:black;
transition:.5s;
}
.boxes:hover{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
<div class="image-wrapper">
<img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="main-image">
<div class="thumbnails">
<div class="thumb-box">
<img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="child-img">
</div>
<div class="thumb-box">
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="800x450" class="child-img">
</div>
<div class="thumb-box">
<img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img">
</div>
<div class="thumb-box">
<img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
</div>
</div>
</div>
</div>
<div class="accomplish">
Image Hover Transition:
<div class="boxes"></div>
</div>
</div>

Personally, I would do this with pure CSS using pseudo elements to create the black overlays.
.thumb-box {
height: 100px;
position: relative;
width: 100px;
// Black overlay
&:after {
background-color: #000;
content: '';
height: 100%;
left: 0;
opacity: 0;// hide overlay to start
position: absolute;
top: 0;
transition: all 250ms ease-in-out;
width: 100%;
}
}
// Show all black overlays on hover
.thumbs {
&:hover {
.thumb-box:after {
opacity: 1;
}
}
}
// Hide black overlay on individual hovered item
.thumb-box {
&:hover {
&:after {
opacity: 0 !important;
}
}
}
Demo: http://jsbin.com/lanuni/edit?html,css,output
Note: I had to add an additional wrapper around each image since you can’t create pseudo elements on <img> tags (see CSS :after not adding content to certain elements).

I think the issue is your are trying to transition between display: inline-block and display: none
You can't transition display. See this question: Transitions on the display: property

First: it flashes b/c the gap between your thumbnail will force your mouse to hover out, thus create the flickering effect.
to solve this you can use setTimeOut() to delay between hovers.
Second: transition between display:block to display:none don't work well, use opacity instead, and put a black background between your thumbnail

How to change mouse over effect to move up and fadein when moues in , and move down and fade out when out mouse?

How to change mouse over effect to move up and fadein when moues in , and move down and fade out when out mouse ?
....................................................................................................................................................................
and it's not work on ie7 , how to solve that ?
http://jsfiddle.net/peap/rhmj0808/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#menu').hover(over, out);
});
function over(event)
{
console.log(!$("#mask").is(":animated"));
if(!$("#mask").is(":animated")){
$('#mask').fadeIn(1000);
$('#mask').css("display","block");
}
}
function out(event)
{
console.log(!$("#mask").is(":animated"));
if(!$("#mask").is(":animated")){
$('#mask').fadeOut(1000);
}
}
</script>
<style type="text/css">
#mask {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:0;
display: none;
}
#menu{
margin-top: 20px;
position: absolute;
z-index: 999;
}
</style>
<div id="mask">
show hover
</div>
<img src="https://www.gravatar.com/avatar/1ead17c7ff6482d20e262c5c60c8fd1f?s=24&d=identicon&r=PG&f=1" id="menu" style=" margin-left: 28px; height: 62px;"/>

try to use animate
$('#mask').stop().animate({'opacity':1}, 1000)
DEMO