We Keep Coding

Description hidden until user hovers over the image?

I'm looking for some help with this project. I want to be able to hover over the image and this black box pops up with the description in it. Can I get some examples of how I would go about doing this? Thank you all so much for the help!
what I'm looking to do when user hovers over the image for a description

with pure css you can do something like this
#image_description {
display: none;
background-color : #333;
color : #fff;
padding : 50px;
}
#the_image:hover~#image_description{
display: block;
}
<img src="https://placehold.it/350x150" id="the_image">
<div id="image_description">SomeDescription</div>
with jQuery you can do something like this
$(document).ready(function(){
$("#the_image").hover(function(){
$("#image_description").fadeIn();
}, function(){
$("#image_description").fadeOut();
});
});
#image_description { display : none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placehold.it/350x150" id="the_image">
<div id="image_description">SomeDescription</div>

#Allan Empalmado is correct. But you can add CSS transitions to make it flow in and out smoothly, with pure CSS transition property. Add this to the code...
#image_description {
background-color: #333;
color: #fff;
oveflow:hidden;
-webkit-transition: max-height 0.9s ease;
-moz-transition: max-height 0.9s ease;
transition: max-height 0.9s ease;
max-height:0;
}
#the_image:hover ~ #image_description{
max-height: 150px;
}
The -webkit- and -moz- make the CSS cross-browser. it is a simple google search to find other properties you can manipulate with the transition properties.Hopefully you can find other things you can do to enhance Alans sample code. happy coding !!

Is it possible to fade in radially using jQuery?

I am trying to make a logo fade in on the page load using jQuery.
You can normally accomplish it on page load by just using:
$(document).ready(function() {
$("div").fadeIn(800);
});
I am wondering if you could either manipulate the event .fadeIn(); or any jQuery to have the image fade in a circular motion. I am trying to go for a single circular motion, not multiple fade in motions. I know there are ways to manipulate the linear direction of an object fading in using top, left, right, or down. I haven't found a way to make it fade in ( or fade out ) to a webpage using a circular direction.
In words:
First, the image from the angles 0 to 90 degrees will fade in, in order.
Next, the image from the angles 90 to 180 will fade in, in order.
Then, the image from the angles 180 to 270 will fade in, in order.
Finally, you'll be able to see the image from 270 to the full image.
If you couldn't follow the words, here is a visual example of what I am trying to accomplish, but it isn't as smooth as I am going for.
So far I have tried having it fade down from the top but then maybe rotate it but that wasn't what I was looking for. I'm not very knowledgeable on how to fix problems in jQuery, but I am asking how do I accomplish this, not specifically my code.
If this can't be accomplished using jQuery, then can it be accomplished using either CSS or some sort of jQuery plugin? If it is possible, is there a way to fade the div out the same way?

If I understand you right you can try something like this:
example: http://jsfiddle.net/hju3dyot/
if you want it to appear more like a scroller
you can simple reduce time in the setTimeout function like this
HTML:
<div id="container">
<div class="img" id="left-top"></div>
<div class="img" id="right-top"></div>
<div class="img" id="left-bottom"></div>
<div class="img" id="right-bottom"></div>
</div>
CSS:
#container {
height: 900px;
width: 450px;
margin: 2% auto;
border: 1px solid #5970bb;
border-radius: 3px;
box-shadow: 10px 10px 20px rgba(35, 35, 35, 0.50);
padding: 5px;
}
.img {
background: url(http://s14.postimg.org/cdkclcbep/cat.jpg) no-repeat;
height: 250px;
width: 200px;
display: inline-block;
opacity: 0;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
#left-top {
background-position: -34px 0;
}
#right-top {
background-position: -199px -10px;
}
#left-bottom {
background-position: -25px -210px;
}
#right-bottom {
background-position: -208px -207px;
}
.visible {
opacity: 1;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
SCRIPT:
var arr = ["#left-top", "#right-top", "#right-bottom", "#left-bottom"];
var counter = 0;
$(document).ready(function () {
function makeItVisible() {
if (counter < arr.length) {
$(".img").removeClass("visible");
$(arr[counter++]).addClass("visible");
} else {
counter = 0;
return;
}
};
setInterval(makeItVisible, 2000);
});

Vertically center a button inside a responsive container with pure CSS?

So I want to make this thumbnail effect.
$(window).resize(setThumbHeight);
$(window).resize(centerBtn);
SEE HERE
As you can see I wrote some JQuery to set the container height and center the btn, which I think is pretty dumb.
I have a few questions:
1. How can I maintain the aspect ratio of the container without using JQuery.
2. How could I center the button vertically inside the container using pure CSS? (It seems someone had it done with table and table-cell)
3. Why background url is not working? (I have the line commented out in the CSS.)
Thanks guys.

Here's a simple cross-browser method to achieve what you're looking to do:
http://codepen.io/aecend/pen/KEvBa
I didn't bother with any of the CSS transitions, just focused on the centering. To maintain the container dimensions, only set the width of the outer thumbnail container, the height will automatically flex to fit. Also, the background url does seem to be working, the image itself was covering the background in your fiddle.
HTML
<div class="thumbnail">
<img src="http://placekitten.com/300/200">
<div class="mask center-in-container"></div>
<button class="button center-in-container">Enter</button>
</div>
CSS
.thumbnail {
width: 30%;
position: relative;
}
img {
display: block;
width: 100%;
height: 100%;
}
.center-in-container {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.button {
width: 50px;
height: 30px;
display: none;
}
.mask {
background-color: rgba(0,0,0,0.3);
display: none;
}
.thumbnail:hover .button {
display: block;
}
.thumbnail:hover .mask {
display: block;
}

You can center an element vertically with this trick:
change value of margin if you change width or height of your button.
-17px is half of height and -30px is half of width
.thumbnail-mask .btn{
position:absolute;
top:50%;
left:50%;
margin:-17px -30px;
}
and for zoom on picture you can use this:
.my-thumbnail:hover img{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);
}
and if you want display your picture with background css property, you must have height on your container .my-thumbnail.

Hashbug,
Aside from a JavaScript method, which, you have employed - there are no dynamic, cross-browser compatible solutions for what you are attempting to do.
If you still do not wish to use JavaScript, and are O.K. with this not working cross-browser, then you may want to take a look at CSS3's flexbox. As I said the flexbox is not supported by all browser versions yet, you can find out which here: caniuse.com. I made a fiddle to show your solution updated with flexbox here:
http://jsfiddle.net/jpatterson69/z8uCK/
.thumbnail-mask {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,0.4);
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
I did not include any of the "hacks" as other users have posted because they generally will cause you much more strife than is needed - your solution is the easiest compared to these. May I ask why you need to use the flexbox?

How to make the direction nav constant on flexslider?

I want the little hover grey arrows to be display block and not animate when hovering over the thumbnail navigation. You can see the demo here. I have been wading through the javascript for the plugin and cannot for the life of me work out where it is animating the arrows. If I could, I would just comment out that code. So can anyone else?

This confused me for a little while, but it turns out the arrow animation isn't actually in the plugins javascript. It's in the CSS using -webkit-transition: all .3s ease;. If you look at the default CSS file and go to line 52 you need to remove the above out of .flex-direction-nav a. So the line should look like the below.
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(images/bg_direction_nav.png) no-repeat 0 0;
position: absolute;
top: 50%;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
opacity: 0;
}

I recently ran into this issue and solved it (with the help of this question/answer) by overriding the following styles:
.flex-direction-nav a {
...
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
with these styles in my own css:
.flexslider .flex-direction-nav a.flex-prev,
.flexslider .flex-direction-nav a.flex-next {
...
-moz-transition: none;
-webkit-transition: none;
transition: none;
}
I'm a big fan of not modifying source code provided by a library, so I think this is a better and more complete solution.

It is very simple, just change the following css code like this:
.flexslider .flex-direction-nav .flex-next {
right: 5px; /* adjust offset to match the hover style */
opacity: .8; /* adjust opacity to match the hover style */
}
.flexslider .flex-direction-nav .flex-prev {
left: 5px; /* adjust offset to match the hover style */
opacity: .8; /* adjust opacity to match the hover style */
}

Make your own arrows: disable directionNav and use manualControls.

Advice about how to animate the background of a list item

I was wondering if you can offer me a better way of achieving the effect Ive created in this fiddle: http://jsfiddle.net/YLuKh/1/
Basically I would like to animate the background colour of the anchor tag revealing an image which I've done by positioning an anchor tag on top of a span on top of an image and then on hover animate the width of the span. Can anyone suggest a more straight forward way of doing this?
HTML
<ul id="test">
<li>
This is the link
<span class="bg"></span>
<img src="http://www.ritaxxii.org/wp-content/uploads/Luxury-Bedroom-Furniture-1.jpg" />
</li>
</ul>​
JS
$(document).ready(function() {
var li_width = $('#test').find('li').width();
console.log(li_width);
$('#test').find('li').on('mouseover', function() {
$(this).find('.bg').stop().animate({
width: '0'
}, 200);
}).on('mouseout', function() {
$(this).find('.bg').stop().animate({
width: li_width
}, 200);
});
});​

As I mentioned in the comments you can use the background position to do the animation. Here's a simple one using only background image positioning ( http://jsfiddle.net/3PESX/ )
$('a').mouseenter(function() {
$(this).stop().animate({ 'background-position-x': '-700px'}, 300);
});
$('a').mouseleave(function() {
$(this).stop().animate({ 'background-position-x': '0'}, 300);
});​
a {
display: inline-block;
height: 50px;
width: 300px;
background: transparent url(http://jtrujillo.net/digital-photo-tutorials/8vs16bit/dgr1.jpg) 0 top no-repeat;
color: grey;
text-decoration: none;
line-height: 50px;
}​
This is a link text​
Beware that the background-position property is a composition of the x and y version. You cannot animate composite properties, you'll need to animate the X and Y version seperately. Alternatively you can use a css hook plugin that makes it possible. You can find those here: https://github.com/brandonaaron/jquery-cssHooks

You can get a referance from this : http://snook.ca/archives/javascript/jquery-bg-image-animations

May I suggest a CSS3-only means of achieving what I think you're trying to do:
li {
border: 1px solid #f90;
width: 504px; /* width of the image, adjust to taste */
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
li a {
display: block;
position: relative;
width: 100%;
height: 2em;
line-height: 2em;
color: #fff;
background-color: #000;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
-ms-transition: width 1s linear;
transition: width 1s linear;
}
li:hover a {
width: 0;
-webkit-transition: width 1s linear;
}
li a::after {
content: url(http://www.ritaxxii.org/wp-content/uploads/Luxury-Bedroom-Furniture-1.jpg);
position: absolute;
top: 0;
right: 0;
left: 100%;
bottom: 0;
}
​
JS Fiddle demo.

If you're going to have a lot of list items, you might want to consider event delegation to the #test element so you dont have to attach a bunch of different event listeners to each li tag
//attach one event listener for 'mouseover' and one for 'mouseout' on the test element
$('#test').on('mouseover', 'li', function(){
//'this' is still the li element
console.log( $(this));
$(this).find('.bg').stop().animate({width: '0'},200);
}).on('mouseout', 'li', function(){
$(this).find('.bg').stop().animate({width: li_width},200);
});