Expand the logo from a half - javascript

has anyone any idea if you can do this in jquery? Where clicking on a piece of the logo expands the rest? Example image:

Why use jQuery if this can be achieved using CSS?
HTML:
<div id='icon-wrapper'>
<img id='icon' alt='icon' src='http://i.stack.imgur.com/sKhJf.jpg?s=60&g=1'/>
<p>Text here</p>
</div>
CSS:
#icon-wrapper{
margin:0 auto;
height:110px;
width:110px;
overflow:hidden;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper:after{
content:"";
display:block;
width:100%;
clear:both;
}
#icon-wrapper:hover{
width:300px;
}
#icon-wrapper:hover #icon{
margin-left:200px;
}
#icon{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
/* Position Absolute to put the icon on the top */
position:absolute;
z-index:10;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper p{
color:black;
font-size:35px;
font-family:arial, helvetica;
/* Fixed width and float left is needed */
width:200px;
float:left;
}
It's long but without using jQuery is a plus point.
Note that we need to use fixed width for the elements, especially for the paragraph.
UPDATE:
For transparent icon, we need to hide the text first, using opacity:0;. Then add CSS Transition so we have smooth effect on hover. Finally, show the text on hover with opacity:1;. But this trick has a bug, sometimes the text didn't 'hide' fast, so it's still shown for a time in the icon. The best solution is adding a background color to the icon, using the same color as the container background.
Updated CSS (transparent text):
#icon-wrapper:hover p{
opacity:1;
}
#icon-wrapper p{
/* ... */
opacity:0;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-ms-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in;
}
Updated CSS (using background color on the icon):
#icon{
/* ... */
background:white;
}
Here is a jsFiddle
Here is an updated fiddle for transparent icon.
Here is an updated fiddle with background color added to the icon.

Not sure if this is something you want.
Check the demo here: http://jsfiddle.net/SdanM/4/
HTML:
<div id="container">
<div id="img">Hidden Element</div>
<div id="btn">Hover to expand</div>
<div>
CSS: hide the hidden element first
#container {
position: relative;
}
#img {
background-color: yellow;
position: absolute;
width: 100px;
height: 50px;
top: 50px;
left: 50px;
display: none;
}
#btn {
background-color: red;
position: absolute;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
jQuery: move the blocks
$("#container").mouseenter( function() {
$("#img").animate({
left: "-=50",
width: "show",
}, 1000);
$("#btn").animate({
left: "+=50",
}, 1000);
});
$("#container").mouseleave( function() {
$("#img").animate({
left: "+=50",
width: "hide",
}, 1000);
$("#btn").animate({
left: "-=50",
}, 1000);
});

Related

How to create Timer Progress bar as shown below in GIF?

I want to create animated progress as below, but the thing is it is not working properly on safari browser
The css property which I used is:
.prgoressBar {
width: 100%;
margin: 0 auto;
height: 22px;
background-color:#BBBBBB;
overflow: hidden;
}
.prgoressBar div {
height: 100%;
text-align: right;
padding: 0;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #185A8D;
box-sizing: border-box;
color:#fff;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
transition: width 1s linear;
}
<div id="QM_progressBar" class="prgoressBar">
</div>
Try using the 'transform: scaleX()' instead of changing the width. Transform uses to run better with transition, maybe that's why Safari is freaking out.
I don't have Safari installed right now, so please check if this codepen works: https://codepen.io/thiagoberrutti/pen/GRmLzZK.
In the codepen I used transition but in this snippet I tried with animations instead, see if one of them can work on Safari:
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear forwards;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
<div class="progress-container">
<div class="progress" style="--time:5s"></div>
</div>

show overlay on flexslider control thumb hover

im trying to customize the flexslider (http://flexslider.woothemes.com/thumbnail-controlnav.html) in a way that when a user hovers on a navigation thumbnail to show an overlay with an icon. Something like this http://callmenick.com/_development/image-overlay-hover-effects/
by editing the flexslider js code i managed to add a div
<div class="thumb_overlay"></div><img src="'+s.attr("data-thumb")+'"'+c+"/>":''+t+""
but i couldnt move it to above the image although i set relative positions
http://jsfiddle.net/livewirerules/r4uthech/1/
Any help will be appreciated
Thanks
Just add this to your CSS:
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
If you prefer, here is your fiddle updated:
http://jsfiddle.net/r4uthech/2/
I hope this can help you. :)

flexslider slides not chaning on thumbnail click

im using flexslider to display a slideshow with thumbnails. recently i added a css code to show an overlay when the thumbnail is hovered. But the problem is when i click on the thumbnail nothing happens.
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
but when i remove the content: " "; block it seems to work or else nothing happens when the thumbnails clicked.
Here is a demo of the slider slider demo
Can someone tell me what am i doing wrong?
Try adding :after to the img element, change li:after to img:after

CSS transition to bottom-right from center

I have a requirement in which the container is stretching all over the page. when I click on the container, it should become smaller.
This should happen with animation. I tried css transition which is animating the stretched element to top:
shrinking slowly to the provided dimensions while moving towards top-right
but what I want is
Shrink in middle and then move to bottom-right of the page by animating.
Fiddle
CSS
#main {
position: fixed;
height: 100%;
width: 100%;
margin-top: 50px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
How should I do this?
You can try combining both transition and animation. Even you can use only animation here:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-animation: to-bottom-right 0.5s 0.5s forwards;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
#-webkit-keyframes to-bottom-right {
100% {
left: 100%;
top: 100%;
margin-left:-100px;
margin-top:-50px;
}
}
Please test the demo using webkit-based browsers, you can add prefixes yourself for other browsers. Note that the animation will run after the transition has been done, so we have to use animation-delay.
Demo.
The demo above uses negative margins to center the div, its advantage is well supported but we have to change the negative margins' values when changing the size of the div. Another way is using translate transform, this will center the div greatly but it requires browsers to support transform feature. Here is the demo using translate instead to center the div Demo 2.
Here is another solution using only animation, the transition is just used for animating the color changing.
Demo 3.
UPDATE: All the demos above work perfectly for browsers supporting animation feature. However it's a pity that IE9 does not support this feature. I've tried using some workaround and I've found a solution by using multi-transition. The first transition lasts for 0.5s while the second transition will start after 0.5s. To animate the div from center to bottom-right corner, you have to use transition for the translate transform. Here is the code it should be:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
-webkit-transform:translate(50vw , 50vh) translate(-50%,-50%);
-ms-transform:translate(50vw , 50vh) translate(-50%,-50%);
-moz-transform:translate(50vw , 50vh) translate(-50%,-50%);
transform:translate(50vw , 50vh) translate(-50%,-50%);
-webkit-transition: all 0.5s ease, -webkit-transform 0.5s 0.5s ease;
-ms-transition: all 0.5s ease, -ms-transform 0.5s 0.5s ease;
-moz-transition: all 0.5s ease, -moz-transform 0.5s 0.5s ease;
transition: all 0.5s ease, transform 0.5s 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
Updated Demo.
Do you mean like this: fiddle
Here's what I changed:
#main {
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 100px);
width: 100%;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
I set the position to absolute and the bottom and right properties to 0. Since the element is not in the document flow any more, I used calc to move set the element 100px smaller than the height.
Well i tried
http://jsfiddle.net/tyuAk/15/
in jquery tho
$("#click").hover(
function() {
setTimeout( '$("#main").delay(500).attr("id","newclass");' ,500 );
});
#main {
position: absolute;
height: 100%;
width: 100%;
background-color: red;
}
#newclass {
position: absolute;
height: 50px;
width: 100px;
margin-top:25%;
background-color: green;
}
#click:hover + #main {
width: 100px;
height: 50px;
margin-top:25%;
background-color: green;
transition-property:width,height,margin;
transition: 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
#click:hover + #newclass {
margin-top:0px;
transition: all 0.5s ease;
}

Why is css transition not working when adding class using javascript / jQuery?

I have a message box which I want to slide down on click. I do this by adding a css class through Angular (and jQuery in my example). But my CSS transition does not take effect.
Is there any obvious mistake I'm doing?
Here's my fiddle: http://jsfiddle.net/mBKXn/
and my code:
// jQuery
$('.test').on('click',function(){
$('#msgContainer').toggleClass('msgShow');
});
// HTML
<div class="container">
<div id="msgContainer" class="msg">
<p>Message here</p>
<p>T2</p>
<p>T4</p>
</div>
Test text
</div>
<button class="test">Click</button>
// CSS
.container{
position: relative;
height: 200px;
width: 400px;
border: solid 1px #222;
}
.msg{
position: absolute;
top: 0;
background-color: #FEEFB3;
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.8s linear;
-moz-transition: height 0.8s linear;
-o-transition: height 0.8s linear;
-ms-transition: height 0.8s linear;
transition: height 0.8s linear;
}
.msgShow{
height: auto;
}
To animate height from 0 to auto you have to use max-height instead:
.msg{
position: absolute;
top: 0;
background-color: #FEEFB3;
max-height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: max-height 0.8s linear;
-moz-transition: max-height 0.8s linear;
-o-transition: max-height 0.8s linear;
-ms-transition: max-height 0.8s linear;
transition: max-height 0.8s linear;
}
.msgShow{
max-height: 1000px;
}
Seems to work: http://jsfiddle.net/mBKXn/3/
Also take a look at this question.
you need to set a defined height. Height:auto won't work as this is the default height value.
see the specs for the height property here:
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
http://jsfiddle.net/mBKXn/7/
.msgShow{
height: 100%;
}
Another (older IE compliant) way to do this is through slideToggle.
Updated Fiddle that works and another Fiddle where I removed some of your transition css and it makes the animation smoother in my opinion.
your code needs a slight change:
$('.test').on('click',function(){
$('#msgContainer').slideToggle('slow');
});
and your class needs a slight change:
.msg{
display:none;
position: absolute;
top: 0;
background-color: #FEEFB3;
height: auto;
width: 100%;
overflow: hidden;
}

Categories