I have pictures in a horizontal scroll and I want to be able to hover over each image, and when I do, I want the picture to be slightly "grayed out" with text over it.
I can't for the life of me figure out how to do it.
I made this fiddle to show what my scroll bar looks like.
https://jsfiddle.net/burgoyne/u1zdn80p/1/
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
Can someone point me in the right direction here? I have been trying different things with CSS to gray it out and add text, with no luck.
Thanks!
You have to specify what you want in a CSS img:hover rule, like this:
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
#scroll img:hover {
opacity: .5;
}
<div id="scroll">
<a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" />
</div>
About the gray color over the image, you can just add opacity to the image on hover ("opacity: 0.5") and, if you want, some transition between the event and the "grayness" with "transition: 0.5s" or so.
About the problem with the text overlay, I think you should visit this answer: Text on image mouseover?
You can place text inside with class named
<span class="text-content"><span>Some text here</span></span>
and then u can use css to place text on the image, something like ...
span.text-content
{
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
I hope this helps.
Is it possible to give the hover-icon a class, so that the icon is the triggerinfo? The image is in gray when i hover it, it gets colored but I wan't to hover a text when is colored, when I going over the little icon. Is there a way overlapping the div with the triggerinfo class over the image, but not leaving the hover of the image. Like hover the div that is not visible and not leaving the hover effect colored ?
Thanks !
If it helps I can share the link to my website, but only as message not for the public post. It gets more visual, and I think better to understand what I mean.
jQuery(document).ready(function() {
jQuery(".triggerinfo").mouseleave(function() {
jQuery(this).next(".info").hide();
});
jQuery(".triggerinfo").hover(function() {
jQuery(this).next(".info").toggle("fade");
});
});
.info {
display: none;
padding: 10px;
background: #fff;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.triggerinfo {
display: inline-felx;
opacity: 0.1;
position: absolute;
margin-top: -50px;
margin-left: 30px;
z-index: 3;
}
.uk-overlay-icon:before {
content: "\f0c9";
position: absolute;
top: 90%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #f69c00;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
<div class="uk-panel">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover ">
<img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
<a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
</figure>
</div>
<div>
<div class="triggerinfo">
sdf
</div>
<div class="info">
<h5>dsfg</h5>
</div>
</div>
</div>
</div>
The Fiddlejsfiddle.net/e8qd8gvf/3/ works now as it should on my site. Now the thing is: on hover the img get colored and it appears a little icon in the bottom left coner, the trigger that is now under the img should be this little icon, because the icon is from the css definition in uk-overlay-icon (from the font awesome)
I dont now how to set the info class on this icon.
Or I was trying put an div with the info class over the img at the position of the icon and than trigger it, but than the colored effekt dont show when I trigger it, so I thought there must be a way to trigger the div on hover and not lose the colored effect, so the trigger div would trigger the Info and musst trigger the hover from the img at the same time
PS: Sorry for the long css !
The <figure> element is intended to mark up diagrams, illustrations, photos, code examples and similar content, "that can be moved away from the main flow of the document without affecting the document’s meaning" (http://w3c.github.io/html-reference/figure.html).
Your way of using it seems to be against this specification.
It's your own responsibility to code according to specification and best practices.
I just opted with your provided example: https://jsfiddle.net/e8qd8gvf/4/
I moved the uk-overlay-icon outside of the figure, added the toggle-info class and put the info box inside it.
All that was left was adding some CSS:
.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
display: none;
cursor: pointer;
position: absolute; bottom: 20px; left: 20px;
width: 30px; height: 30px;
}
.toggle-info > .info {
width: 150px; height: 150px;
border: 2px solid red;
position: absolute; bottom: -20px; left: 10px;
transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }
as well as changing your JS to:
jQuery(document).ready(function() {
jQuery(".uk-overlay").hover(
function() {
jQuery(this).next(".toggle-info").removeClass("hidden");
},
function() {
jQuery(this).next(".toggle-info").addClass("hidden");
}
);
jQuery(".toggle-info").hover(
function() {
jQuery(this)
.removeClass("hidden")
.children(".info").removeClass("hidden");
},
function() {
jQuery(this)
.addClass("hidden")
.children(".info").addClass("hidden");
}
);
});
My solution is only showing you a way to accomplish things and is by far not "nice". You need to adapt it yourself and to specifications.
Please see this fiddle I have set up.
You are first confronted by three links. Each link triggers divs to slide out.
The link 'john smith' slides out and in at the speed we want. When it slides out the first line slides out then when that is completed the second line slides down as though coming from the first. When it slides back it does the same motion at the same speed but reverse i.e.. the second line slide back up first and then when that is completed the first line slides back to the left.
When you click on the work link and menu slides out in the same manner as the bio. Also there is a sub menu that slides out when on clicks on item 2.
When the user clicks on the contact link one line slides out.
What we need to achieve is this; when any div is open and another link is clicked on, the visible div slides back in reverse to how they slid in. We have almost achieve this, however, the code is not quite right as the divs are not sliding back in at the same speed and in the right order, they simply slide back fast. For example, if one has clicked on 'work' and the 'item 2' link, and then you select 'contact' the opened div slide back very quickly. What I need to achieve is that they slide back in reverse to how they slid out.
To attempt to make it clear, if you click on 'work' and then 'item 2' so with menus are visible and then click on work again, you will see the sub menu slides away first before the first menu. You will also notice that the items that slide up slide back down first before the divs slide back to the left. This is what needs to happen if you click on 'contact' or 'john smith' when the menus are visible.
I know this sounds very complicated and if I can answer any questions to make it clearer I will.
Thanks
$('#bio-line-1').animate({width: 'hide'});
$('#contact-info').animate({right: 'hide'});
$('#bio-line-2').slideUp("fast");
$('#black-div, #black-credits, #igna-1-div, #igna-1-credits, #igna-2- div, #igna-2-credits, #fatal-div, #fatal-credits').fadeOut('100');
});
you can use .setTimeout() to put some delay
setTimeout(function () {
$('#contact-info').animate({right: 'toggle'});
}, 500);
DEMO
DEMO
I finally worked out how to fix it to work how I intended, however my code is very long winded. I realise there must be a way to reduce the repetition of the code by using generic functions. I will now post the working code onto Code Review for further development.
$('#menu').click(function () {
if ( $('#igna-1').css('display') != 'none' ) {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({ left: 'hide' }, 300);
});
Although I see that you have found your solution but as I had started coding the TweenMax version of it, I went on and finished it. The reason I am suggesting GSAP should be the go-to tool for animations for the web is not just because it is crazy fast, or easy to jump-start or get started with, or makes some of the coolest animation effects possible with few lines of code (I can go on and on) ... but it is as intuitive as it can get.
Coming back to your animation, I have converted your animation solution into using TimelineMax / TweenMax entirely, snippet of which is as follows:
/*global TweenMax,TimelineMax,Power2,Power0*/
var getElementById=document.getElementById.bind(document);
var nameA=getElementById('name-a'),menu=getElementById('menu'),contact=getElementById('contact');
var contactInfo=getElementById('contact-info'),contactInfoAnchor=contactInfo.querySelector('a');
var igna=getElementById('igna'),ignaAnchor=igna.querySelector('a');
var ignaOne=getElementById('igna-1'),ignaOneAnchor=ignaOne.querySelector('a');
var ignaTwo=getElementById('igna-2'),ignaTwoAnchor=ignaTwo.querySelector('a');
var black=getElementById('black'),blackAnchor=black.querySelector('a');
var fatal=getElementById('fatal'),fatalAnchor=fatal.querySelector('a');
var bioLineOne=getElementById('bio-line-1'),bioLineOneParagraph=bioLineOne.querySelector('p');
var bioLineTwo=getElementById('bio-line-2'),bioLineTwoParagraph=bioLineTwo.querySelector('p');
var tlName=getTimeline(),tlContact=getTimeline(),tlWork=getTimeline(),tlIgnaTwo=getTimeline(),tlWorkIgnaTwoCombined=getTimeline();
var isTlNameDirectionForward=false,isTlContactDirectionForward=false,isTlWorkDirectionForward=false,isTlIgnaTwoDirectionForward=false,reverseTimeScale=1;
var duration=.4,easeInOut=Power2.easeInOut,easeOut=Power2.easeOut,easeIn=Power2.easeIn,easeNone=Power0.easeNone;
function init(){
setTlName();
setTlContact();
setTlWork();
setTlIgnaTwo();
setTlWorkIgnaTwoCombined();
assignListeners();
}
function setTlName(){
addParentDIVsToTimeline(tlName,[bioLineOne,bioLineTwo],['rect(10px 633px 50px 0px)','rect(10px 633px 50px 0px)']);
tlName.fromTo(bioLineOneParagraph,duration,{x:-633},{x:0,ease:easeOut,clearProps:'x'},0).fromTo(bioLineTwoParagraph,duration,{y:-40},{y:0,ease:easeOut,clearProps:'y'},duration*.3);
}
function setTlContact(){
addParentDIVsToTimeline(tlContact,[contactInfo],['rect(0px 120px 20px 0px)']);
tlContact.fromTo(contactInfoAnchor,duration,{display:'block',x:150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0);
}
function setTlWork(){
var fromProps={display:'block',y:40},toProps={display:'block',y:0,ease:easeOut,clearProps:'display, y'};
addParentDIVsToTimeline(tlWork,[fatal,igna,black],['rect(0px 120px 20px -90px)','rect(0px 120px 26px 0px)','rect(0px 120px 26px 0px)']);
tlWork.fromTo(fatalAnchor,duration,{display:'block',x:-150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0).fromTo(ignaAnchor,duration,fromProps,toProps,duration*.3).fromTo(blackAnchor,duration,fromProps,toProps,duration*.6);
}
function setTlIgnaTwo(){
addParentDIVsToTimeline(tlIgnaTwo,[ignaTwo,ignaOne],['rect(0px 120px 20px -90px)','rect(0px 120px 26px 0px)']);
tlIgnaTwo.fromTo(ignaTwoAnchor,duration,{display:'block',x:-150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0).fromTo(ignaOneAnchor,duration,{display:'block',y:40},{display:'block',y:0,ease:easeOut,clearProps:'display, y'},duration*.3);
}
function setTlWorkIgnaTwoCombined(){
tlWorkIgnaTwoCombined.to(tlIgnaTwo,duration,{progress:0,ease:easeNone},0).to(tlWork,tlWork.totalDuration(),{progress:0,ease:easeNone},duration*.3);
}
function assignListeners(){
nameA.addEventListener('click',onNameAClicked,false);
menu.addEventListener('click',onMenuClicked,false);
contact.addEventListener('click',onContactClicked,false);
igna.addEventListener('click',onIgnaClicked,false);
ignaOneAnchor.addEventListener('click',playTlWorkIgnaTwoCombined,false);
ignaTwoAnchor.addEventListener('click',playTlWorkIgnaTwoCombined,false);
black.addEventListener('click',onMenuClicked,false);
fatal.addEventListener('click',onMenuClicked,false);
}
function onNameAClicked(){
isTlNameDirectionForward=!isTlNameDirectionForward;
isTlNameDirectionForward?tlName.timeScale(1).play():tlName.timeScale(1).reverse();
reverseTlContact();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}else if(isTlWorkDirectionForward){reverseTlWork();}
}
function onMenuClicked(){
isTlWorkDirectionForward=!isTlWorkDirectionForward;
isTlWorkDirectionForward?tlWork.timeScale(1).play():tlWork.timeScale(1).reverse();
reverseTlContact();
reverseTlName();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}
}
function onContactClicked(){
isTlContactDirectionForward=!isTlContactDirectionForward;
isTlContactDirectionForward?tlContact.timeScale(1).play():tlContact.timeScale(1).reverse();
reverseTlName();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}else if(isTlWorkDirectionForward){reverseTlWork();}
}
function onIgnaClicked(){
isTlIgnaTwoDirectionForward=!isTlIgnaTwoDirectionForward;
isTlIgnaTwoDirectionForward?tlIgnaTwo.timeScale(1).play():tlIgnaTwo.timeScale(1).reverse();
}
function addParentDIVsToTimeline(tl,parents,clipRects){
var length=parents.length;
for(var i=0;i<length;i+=1){tl.fromTo(parents[i],duration,{display:'none',clip:clipRects[i]},{display:'block',clip:clipRects[i],ease:easeOut,clearProps:'clip'},duration*.3*i);}
}
function getTimeline(){return new TimelineMax({paused:true});}
function reverseTlContact(){
if(isTlContactDirectionForward){
isTlContactDirectionForward=false;
tlContact.timeScale(reverseTimeScale).reverse();
}
}
function reverseTlName(){
if(isTlNameDirectionForward){
isTlNameDirectionForward=false;
tlName.timeScale(reverseTimeScale).reverse();
}
}
function reverseTlWork(){
isTlWorkDirectionForward=false;
tlWork.timeScale(reverseTimeScale).reverse();
}
function playTlWorkIgnaTwoCombined(){
isTlIgnaTwoDirectionForward=isTlWorkDirectionForward=false;
tlWork.pause(tlWork.totalTime());
tlIgnaTwo.pause(tlIgnaTwo.totalTime());
tlWorkIgnaTwoCombined.pause(0).play();
}
//
init();
#name-a {
left: 38px;
position: fixed;
top: 38px;
z-index: 1;
}
#bio-line-1 {
left: 150px;
position: fixed;
top: 35px;
width: 633px;
z-index: 1;
}
#bio-line-1 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#bio-line-2 {
left: 150px;
margin-top: 20px;
position: fixed;
top: 38px;
width: 633px;
z-index: 1;
}
#bio-line-2 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#menu {
bottom: 34px;
left: 38px;
position: fixed;
z-index: 4;
background-color: #ffffff;
}
#contact {
bottom: 34px;
position: fixed;
right: 38px;
z-index: 1;
background-color: #ffffff;
}
#contact-info {
bottom: 34px;
margin-right: 38px;
position: fixed;
right: 160px;
text-transform: lowercase;
white-space: nowrap;
}
.hidden {
display: none;
}
#fatal {
bottom: 34px;
float: right;
left: 135px;
margin-left: 36px;
position: fixed;
white-space: nowrap;
z-index: 1;
}
#black {
bottom: 61px;
float: right;
left: 171px;
margin-bottom: 18px;
position: fixed;
white-space: nowrap;
z-index: 1;
}
#igna {
bottom: 52px;
float: right;
left: 171px;
margin-bottom: 5px;
position: fixed;
white-space: nowrap;
width: 270px;
z-index: 1;
}
#igna-1 {
bottom: 72px;
left: 404px;
margin-bottom: 7px;
position: fixed;
white-space: nowrap;
width: 162px;
z-index: 1;
}
#igna-2 {
bottom: 57px;
left: 82px;
margin-left: 321px;
position: fixed;
white-space: nowrap;
width: 162px;
z-index: 1;
}
.sub-menu {
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<div id="name-a">John Smith</div>
<div id="menu">Work</div>
<div id="contact">Contact</div>
<div class="hidden" id="contact-info">conatct#foo.com</div>
<div class="hidden hover" id="black">item 1</div>
<div class="hidden hover" id="igna">item 2</div>
<div class="hidden hover" id="fatal">item 3</div>
<div class="hidden hover" id="igna-1">S/S <span id="ss">15</span></div>
<div class="hidden hover" id="igna-2">A/W 14</div>
<div id="bio-line-1" class="hidden"><p>holds a Master's Degree from the University of the Arts London</p></div>
<div id="bio-line-2" class="hidden"><p>and currently works foo bar.</p></div>
Hope you find it all useful in some way.
Further reading:
Sequence JavaScript Animations Like a Pro with GSAP's
TimelineLite.
Understanding the Position Parameter.
P.S. The example above may not have done justice to the library. There may have been bugs in my code or the approach may seem overly complicated, but these shouldn't take away the credits from this GreenSock Animation Platform. Love this tool.
T
I was wondering if anyone can give me some insight on javascript/jquery for div expansion. In the JSFiddle you will find:
Four black divs:
.first_box {
width: 142px;
height: 142px;
margin-left: 0px;
margin-top: 0px;
position: absolute;
display: table;
background-color: black;
}
A unique hover color for each div:
.first_box:hover {
width: 142px;
height: 142px;
margin-left: 0px;
margin-top: 0px;
position: absolute;
display: table;
background-color: green;
}
So my question is:
What can I use so that when a div is clicked, it expands to the size of the four divs (289 X 289)?
The expanded div will then be filled with unique content.
Thank you!
JSFiddle: http://jsfiddle.net/SXfeG/1/
If you use absolute positionning, you can add some CSS like that :
.div-clicked {
width: 289px !important ;
height: 289px !important ;
margin-top: 0 !important ;
margin-left: 0 !important ;
z-index: 400 ;
}
div {
transition: all 1s ; // To add transition effect
}
And then, with jQuery, you can toggle 'clicked' class simply by using :
$('div').on('click', function (e) { $(this).toggleClass('clicked') ; })
JSFiddle : http://jsfiddle.net/85QFN/
I am using the following Javascript and CSS to create popups:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
var popup2;
Sys.require(Sys.components.popup, function () {
popup2 = Sys.create.popup("#popup2", {
parentElementID: "target",
});
});
</script>
#popup
{
width: 400px;
height: 250px;
overflow: scroll;
background-color: #EAFDB3;
border: solid 2px black;
}
#popup2
{
width: 400px;
height: 250px;
background-color: #EAFDB3;
border: solid 2px black;
}
The location these popups appear is done with:
<span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"></span>
The content of the popup goes between:
<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">CONTENT </div>
How can I get this popup to popup in the middle of the screen regardless of resolution?
Set top to 50%, left to 50%. Then have a negative left margin that is half of the width of the popup, and a negative top margin that is half of the height of the popup. What you have seems to be close...
But margin-top should be -125px and margin-left should be -200px, given a popup that is 400x250 in size.
For dynamically-sized popups, consider wrapping your content in div.vc-outer and div.vc-inner.
CSS
.vc-outer {
display: table;
position: fixed;
width: 100%;
height: 100%; }
.vc-inner {
display: table-cell;
text-align: center;
vertical-align: middle; }
.popup {
display: inline-block; }
HTML
<div class="vc-outer"><div class="vc-inner">
<div class="popup">Hey!</div>
</div></div>
You are giving inline style(even same property) as well as using ID. I will suggest to do this only once and that to using ID.