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
Related
I am using bootstrap tooltip to display a tooltip with an image in it. I am so far this much successful
How ever my requirement looks like this
I need to move the arrow upward so it matches the design, Is there a way we can customize the position of the arrow ?
The below function works on mouseoverevent
function showToolTip(elem) {
var ttContent = '<img class=\'ttImage\' src=\'http:\/\/getbootstrap.com\/apple-touch-icon.png\' \/>';
$(elem).addClass("filter-text-highlight");
if (!$(elem).parent('a.ttTooltip').length) {
$(elem).wrap('<a data-toggle=\"tooltip\" class=\"ttTooltip\" style=\"text-decoration:none\" title=\"' + ttContent + ' \">');
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'right',
html: true,
});
$(elem).tooltip().mouseover();
}
}
You can create your own tooltip that gives you more freedom. and it's pretty easy.
here is sample snippet. you just have to change opacity on hover a div.
.parent{
position:relative;
display:inline;
}
.tooltip{
opacity:0;
position:absolute;
right:-180px;
top:0;
background-color:#cccccc;
height:40px;
width:150px;
text-align:center;
padding-top:5px;
}
.tooltip::before{
content:"";
width: 0;
height: 0;
border-style: solid;
position:absolute;
left:-20px;
border-width: 10px 20px 10px 0;
border-color: transparent #cccccc transparent transparent;
}
.hover:hover + .tooltip{
opacity:1;
}
<div class="parent">
<button class="hover">Hover Me</button>
<div class="tooltip">hello World</div>
</div>
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>
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>
i cant seem to find the problem in my code.
I want to click the #menu and it will slide the #menudrop from the right.
#menudrop {
width: 200px;
height: 300px;
background: red;
position: absolute;
right: -9999px; /* get element out of viewport */
transition: 0.5s ease;
}
#menu{
width:100px;
height:100px;
position:absolute;
top:20px;
left:200px;
background-color:black;
}
<div id="menu"></div>
<div id="menudrop"></div>
$(document).ready(function(){
$('#menu').Click(function(){
$('#menudrop').css('right', '0px');
});
});
https://jsfiddle.net/theUnderdog/n60guhkq/
There are 2 issues in your code,
There is no function like Click (capital C used) available with jquery its click,
$(document).ready(function(){
$('#menu').click(function(){
$('#menudrop').css('right', '0px');
});
});
And its very important to include jquery library into our page before using it.
DEMO
I want to know how to turn my two arrow buttons into scrolling buttons so you can scroll through the div container. IF you look at the demo below you will notice a window appears when you press the black square. One the window opens there are to black rectangle which indicate my scrolling buttons the the gray squares are the contents. I would like to remove the scroll bar but still have scrolling function which I can control with the two black rectangle buttons i made. I would also like the bottom black rectangle to be where the horizontal scroll bar is normally at and I would not like that button to fall into the scroll because that would void the whole purpose.
I would also like top button to disappear when the container is all the way at the top and the bottom button to disappear when the container is all the way at the bottom.
There is a website that I got this idea from so you can go look at it to see what I am talking about. It will be listed below! If you click the little map button on the left another window will open up with circle icons! You may have to shrink your browser for the scroll feature to appear but you will notice a button at the bottom which scrolls down and once you go all the way down it disappear and once you scroll down the up button appears to scroll up then goes away when you get to the top again.
Here is the example website! http://intothearctic.gp/en/
Here is some code!
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates" class="not-open regionsButton">
<div id="regionsUnitedStatesTooltip"></div>
</div>
</div>
<div id="regionsUnitedStatesChooseState" class="regionsContent">
<div id="chooseStateUnitedStatesColumnOne">
<div id="chooseStateUnitedStatesScrollUp"></div>
<div id="chooseStateAlabama1" class="not-open regionsButton"></div>
<div id="chooseStateAlabama2" class="not-open regionsButton"></div>
<div id="chooseStateAlabama3" class="not-open regionsButton"></div>
<div id="chooseStateAlabama4" class="not-open regionsButton"></div>
<div id="chooseStateAlabama5" class="not-open regionsButton"></div>
<div id="chooseStateAlabama6" class="not-open regionsButton"></div>
<div id="chooseStateAlabama7" class="not-open regionsButton"></div>
<div id="chooseStateUnitedStatesScrollDown"></div>
</div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height:100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
position: absolute;
left: -60px;
transition: left ease-in-out 0.5s;
top: 0;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
position: absolute;
top:25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-color:#111111;
}
#regionsUnitedStatesTooltip {
opacity:0;
background-color:#000;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsUnitedStates:hover {
background-position:bottom;
}
#regionsUnitedStatesChooseState{
position:absolute;
transition:all ease-in-out 0.25s;
left: -150px;
width: 150px;
height: 100%;
background: #505759;
top:0;
z-index:-1;
overflow:auto;
}
#regionsUnitedStatesChooseState.show {
left: 60px;
z-index:-1;
}
#chooseStateUnitedStatesScrollUp {
width:150px;
height:40px;
background-color:#111111;
top:0%;
}
#chooseStateUnitedStatesScrollUp:hover {
background-position:bottom;
cursor:pointer;
}
#chooseStateUnitedStatesScrollDown {
width:150px;
height:40px;
background-color:#111111;
bottom:100%;
}
#chooseStateUnitedStatesScrollDown:hover {
background-position:bottom;
cursor:pointer;
}
#chooseStateUnitedStatesColumnOne {
width:100px;
height:100%;
float:left;
top:0%;
}
#chooseStateAlabama1 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama2 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama3 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama4 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama5 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama6 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
margin-bottom:10px;
}
JAVASCRIPT
$(function(slideSidemenu) {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
var $regionsContent = $('.regionsContent'),
$regionsButton = $('.regionsButton').click(function(){
var $button = $(this).removeClass('not-open');
var buttonIndex = $regionsButton.index($button);
$regionsContent.removeClass('show');
setTimeout(function() {
$regionsContent.eq(buttonIndex).addClass('show');
}, 150);
$regionsButton.not($button).addClass('not-open');
});
$('#chooseStateAlabama').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
}, 300);
});
$('#chooseStateAlaska').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
}, 300);
});
DEMO
JSFIDDLE
This doesn't make the scrollbars disappear, nor does it hide buttons other than the example button scrolling out of view when moving down to paragraph four (so this isn't everything you need), but for a basic "click a div to scroll with jQuery" example, using code from this answer:
window.onload = init;
function init() {
$("#myButton").click(function() {
$('html, body').animate({
scrollTop: $("#foo4").offset().top
}, 2000);
});
}
Working example.