Basically, I am doing a project which looks like this:
when a mouse moves over an image, the image inside a div will be enlarged through an animation, but only the part of image inside the div should be displayed, and the outer part should be clipped. Is there any way to clip the image, according to the width and height of the div? In my case, it only enlarged when the mouse hovers over it, but it is not clipped.
$('.thumbnail').on('mouseover',
function() {
$(this).find('.thumb_pic').addClass('hover_effect');
}
);
$('.thumbnail').on('mouseout',
function() {
$(this).find('.thumb_pic').removeClass('hover_effect');
}
);
.thumbnail {
display: inline-block;
position: relative;
}
.thumb_pic {
width: 500px;
padding: 5px;
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.hover_effect {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
.mask {
opacity: 0;
position: absolute;
top: 5px;
left: 5px;
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.75);
transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.mask:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail">
<img class="thumb_pic" src="/thumb_img/thumb.png" />
<div class="mask"></div>
</div>
.thumbnail{
overflow:hidden;
width: 500px;
height: 500px;
}
you don't need the mask div. but why do you use jquery and not css? use .thumb_pic:hover instead of .hover_effect and remove your javascript.
I think the property you're looking for is "overflow: hidden"
NOTE: This isn't an answer, only a suggestion to make your code a little more efficient
Instead of using JQuery mouseover and mouseout do it with css
Instead of
.hover_effect {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
Try
.thumbnail:hover .thumb_pic {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
Related
I need some help here. I'm trying to make a hamburger menu for my website but for some reason which I can't figure out, it doesn't work. Here's the HTML, CSS and JavaScript code which I've written in codepen.io:
https://codepen.io/TheUnrealisticProgrammer/pen/QvjvVW
Here's the JavaScript code:
$(document).ready(function(){
$('Menu').click(function(){
$(this).toggleClass('Trigger');
});
});
From the code, the first span bar should animate by rotating 135 degrees after I click on it but it's not.
Use Jquery and JQuery UI before using. And $('Menu') Menu is not a tag but it is ID of div as per your Code Pen. It has to be $('#Menu').
your css style is broken,
you don't have jQuery (add through setting)
$('Menu') this is jQuery as other said, you are selecting id so should be $('#Menu')
check this link for working example, fixed jQuery, js and CSS:
https://codepen.io/hdl881127/pen/wdKZVj
fixed css:
#Menu{
position:relative;
margin-top:20px;
margin-left:20px;
display:block;
height:50px;
cursor: pointer;
width:50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#Menu span{
position:absolute;
background:orange;
display:block;
height: 6px;
width: 100%;
border-radius:50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#Menu span:nth-child(1){
top:0px;
}
#Menu span:nth-child(2){
top:18px;
}
#Menu span:nth-child(3){
top:36px;
}
#Menu.Trigger span:nth-child(1){
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#Menu.Trigger span:nth-child(2){
top: 18px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
#Menu.Trigger span:nth-child(3){
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Please do these steps.
Go to your code pen
Click on the setting icon available in the JS section.
Add jquery reference (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js) by clicking on the add another resource button placed at the right bottom of the dialog box.
In your javascript, you are using $('Menu'). which is actually searching for the tag called Menu. Change it to $('#Menu'). As you want to target to the ID.
It will work perfectly fine.
I have an multipage with slider: I inserted a css3 animation (the famous rocket animation)
I had code:
#outerspace {
position: relative;
height: 400px;
background: #fff;
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
}
div.rocket div {
width: 92px;
height: 215px;
background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
-webkit-animation: bounceIn 2s;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(0px, -5400px);
-moz-transform: translate(0px, -5400px);
-o-transform: translate(0px, -5400px);
-ms-transform: translate(0px, -5400px);
transform: translate(0px, -5400px);
}
<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>
How Can I start animation automatically when slide changes?
Soo Plan here is to trigger the animation by adding active class to the outerspace div instead of hover, like below
#outerspace.active div.rocket {
-webkit-transform: translate(0px, -5400px);
-moz-transform: translate(0px, -5400px);
-o-transform: translate(0px, -5400px);
-ms-transform: translate(0px, -5400px);
transform: translate(0px, -5400px);
}
and the trigger it through addclass and removeclass in Jquery.Makesure to set time out to allow time for the transition to take place before removing the class.
$("#outerspace").addClass("active");
setTimeout(function() {
$("#outerspace").removeClass("active");
}, 1000);
I wasnt sure what you wanted to do with the rocket exactly but this codepen link shows the rocket being triggered when the slide changes, i have used simple slider as the question doesnt mention exactly what kind of slider are you using,
http://codepen.io/saa93/full/BQNXJd
You should look into CSS3 animations which will work in almost all the modern browsers without the use of javascript or jQuery.
Here's a JSfiddle to start with, and you will need to add into your slider.
A simple example would be like:
/* Add a keyframe with a name, also add */
#keyframes rocket {
from {
transform: translate(0px, 0);
}
to {
transform: translate(0px, -250px);
}
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
/* Use the animation name with additional properties */
animation-name: rocket;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Working snippet:
#outerspace {
position: relative;
height: 400px;
background: #fff;
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
-webkit-animation-name: rocket;
-webkit-animation-duration: 3s;
animation-name: rocket;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div.rocket div {
width: 92px;
height: 215px;
background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
#-webkit-keyframes rocket {
from {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
to {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
}
#keyframes rocket {
from {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
to {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
}
<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>
There is a cubic gallery of images and my requirement is that on mouse hover any image should scale in the middle of the screen. I went through some solutions but they scale image at the exact location it is currently present on the screen.
While the image is scaled all the remaining gallery should go in background.
Please suggest me an approach for doing this And please let me know in case of any code to be posted.
So as suggested by Joramanda on adding above suggestion this seems to be working fine. Below is the css so the left right top and z index were adjusted to generate the desired effect.
.polaroid {
width: 33%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
float: left;
border: thin;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
img {
width: 100%
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.container {
text-align: center;
padding: 10px 20px;
float: left;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.polaroid:HOVER {
position:absolute;
left: 20%;
right: 20%;
top:20%;
z-index:10;
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.9);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
The homepage of airbnb has a "play" button that, when clicked, triggers a fullscreen html video.
How can you create a button/function that will trigger an automatically fullscreen html video?
I checked out the Airbnb homepage and I saw the video and the effect you are talking about. What you want is a "video" version of the lightbox. It's actually a pretty easy effect to achieve. What you need is:
A button.
A div to be the lightbox, which appears after the onclick event of the button is triggered.
A div to nest the video inside.
An actual video to show.
A close button to close the lightbox.
I created a simple version for you in this codepen.
You can also check it out using the snippet below.
$(document).ready(function() {
// When the button is clicked make the lightbox fade in in the span of 1 second, hide itself and start the video
$("#button").on("click", function() {
$("#lightbox").fadeIn(1000);
$(this).hide();
// A simple hack to start the video without using the YouTube api
var videoURL = $('#video').prop('src');
videoURL += "?autoplay=1";
$('#video').prop('src', videoURL);
});
// When the close button is clicked make the lightbox fade out in the span of 0.5 seconds and show the play button
$("#close-btn").on("click", function() {
$("#lightbox").fadeOut(500);
$("#button").show(250);
});
});
#button {
/* Text */
font-size: 45px;
/* Dimensions */
width: 100px;
height: 100px;
/* Positioning */
position: fixed;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* The code above makes sure the video is
both vertically and horizontally centered
to the screen */
/* Styling */
background-color: rgba(0, 0, 0, 0.95);
border: 0; /* remove annoying grey border */
border-radius: 50%; /* make it a circle */
outline: none; /* Ditch the annoyning blue outline on click */
cursor: pointer;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25);
/* ----- Transformations ----- */
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease;
-moz-transition: transform .5s ease;
-ms-transition: transform .5s ease;
-o-transition: transform .5s ease;
transition: transform .5s ease;
}
#button:hover {
/* ----- Transformations ----- */
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease;
-moz-transition: transform .5s ease;
-ms-transition: transform .5s ease;
-o-transition: transform .5s ease;
transition: transform .5s ease;
}
#button > i {
/* Text */
color: grey;
text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
/* Make play sign 3d-ish */
/* Positioning */
position: relative;
margin-top: 4px;
margin-left: 6px;
/* ----- Transitions ----- */
-webkit-transition: color .5s ease;
-moz-transition: color .5s ease;
-ms-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
}
#button:hover > i {
/* Text */
color: white;
/* ----- Transitions ----- */
-webkit-transition: color .5s ease;
-moz-transition: color .5s ease;
-ms-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
/* When we hover on the button make the play sign white. */
}
#lightbox {
/* ----- Positioning ----- */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* The code above makes sure that the
lightbox covers the entire page*/
/* ----- Visibility ----- */
display: none;
/* ----- Styling ----- */
background-color: rgba(0, 0, 0, 0.95);
/* Normally, most lightboxes do not use
a completely solid black, but with about
90-95% opacity so that the background is
somewhat visible */
}
#video-wrapper {
/* ----- Positioning ----- */
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* The code above makes sure the video is
both vertically and horizontally centered
to the screen */
/* ----- Styling ----- */
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
/* The code above is used to add a little shadow to the video making blend in better */
}
#close-btn {
/* ----- Text ----- */
color: grey;
font-size: 25px;
/* ----- Positioning ----- */
position: fixed;
top: 3%;
right: 3%;
z-index: 2;
/* The code above is used to put the button on the upper right corner of the lightbox */
/* ----- Transformations ----- */
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
/* The code above is used to initialize the scale for the button so that it can be used in transitions */
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease, color .5s ease;
-moz-transition: transform .5s ease, color .5s ease;
-ms-transition: transform .5s ease, color .5s ease;
-o-transition: transform .5s ease, color .5s ease;
transition: transform .5s ease, color .5s ease;
}
#close-btn:hover {
/* ----- Text ----- */
color: white;
/* ----- Styling ----- */
cursor: pointer;
/* ----- Transformations ----- */
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease, color .5s ease;
-moz-transition: transform .5s ease, color .5s ease;
-ms-transition: transform .5s ease, color .5s ease;
-o-transition: transform .5s ease, color .5s ease;
transition: transform .5s ease, color .5s ease;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--Requirements-->
<!--I use a font awesome icon as a close button.
Be sure to include in your file the latest version
of Font Awesome for it to work.
LINK:
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css-->
<!--Also remember to include the latest version of jQuery
in order for the script to work
LINK: http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js-->
<button id="button"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<div id="lightbox">
<i id="close-btn" class="fa fa-times"></i>
<div id="video-wrapper">
<iframe id="video" width="960" height="540" src="https://www.youtube.com/embed/lJfqK9bgIng" frameborder="0" allowfullscreen></iframe>
</div>
</div>
html code..
<div>
<ul class="social-icon">
<li><a href="#" class="social-facebook"><i class="fa fa-facebook"></i></a</li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-dribbble"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-rss"></i></li>
</ul>
</div>
css code..
.social-icon {
text-align: center;
text-decoration: none;
position: fixed;
}
.social-icon li {
list-style: none;
display: inline-block;
float: left;
}
.social-icon a {
display: inline-block;
font-size: 18px;
line-height: 38px;
width: 35px;
border: 1px solid #f7f7f7;
border-left: 0;
text-decoration: none;
}
.social-icon a.social-facebook {
opacity: 0;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon a.social-facebook:hover {
background-color: #0e39d8;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.social-icon a:first-child {
border-left: 1px solid #f7f7f7;
}
.social-icon a i {
color: #d2d2db;
}
The problem is that.. I need one static icon and one hover icon... my static icon opacity was-0.. but i want to show static icon in same position and when hover the icon gonna be down and up.......please help me..... the fb icon not shown when hover its show.
Here is the jsfiddle link
Sorry for my bad English.
You try this
I have done it using CSS3 keyframes
CSS
.social-icon a:hover {
-webkit-animation: 0.3s popIn;
-moz-animation: 0.3s popIn;
animation: 0.3s popIn;
background-color: #0e39d8;
}
#-webkit-keyframes popIn
{
0% {-webkit-transform: scale(1)}
50% {-webkit-transform: scale(2)}
100% {-webkit-transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}
#-moz-keyframes popIn
{
0% {-moz-transform: scale(1)}
50% {-moz-transform: scale(2)}
100% {-moz-transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}
#keyframes popIn
{
0% {transform: scale(1)}
50% {transform: scale(2)}
100% {transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}
What I usually do is:
create a tiny DIV element,
set a background to it using CSS (your image).
then create a :hover setting in CSS with a different background.
Why you set the opacity 0, that make your image trasparent.
if you want to see the static image you have to set opacity not 0 but 1 for see the image.
I do not quite understand what you want but give effect your varinat think that my version will help you
DEMO
DEMO 2
DEMO 3
.social-icon a {
opacity: 1;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon a:hover {
background-color: #0e39d8;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}