I am trying to implement a Jquery Hover function on my Company Logo. I want to achieve this :
However, I had achieved THIS
I used the following logic :
$(".m1").hover(function() {
dir = !dir;
r = dir? -50 : 0;
t = dir? 50 : 0;
$(".slide").stop().animate({left: r+'px'}, 300);
});
You can check my JS Fiddle here : http://jsfiddle.net/Jiteen/xZ6Hv/
Any sort of Help or Suggestion is Appreciated.
How about the below as a starting point? No need for JS!
Demo Fiddle
HTML
<div>
<div href="#" class="word" data-text="edia">M</div>
<div href="#" class="word" data-text="antra">M</div>
</div>
CSS
.word {
display:inline-block;
font-size:1em;
line-height:1;
position:relative;
font-size:50px;
}
.word:first-child {
color:orange;
}
.word:last-child {
color:grey;
}
.word:after {
content:attr(text);
position:relative;
display:inline-block;
overflow:hidden;
max-width:0;
color:black;
font-size:20px;
transition:max-width .5s ease-in;
}
div:hover .word:after {
max-width:40px;
}
You can achieve this by using a structure like this:
<div class="logo">
<div class="m1">M</div>
<div class="m3">aaa</div>
<div class="m2">M</div>
<div class="m4">aaa</div>
</div>
And animate it by changing the width of .m3 and .m4
jsFiddle
This is what i would do: http://jsfiddle.net/A6vYy/.
Do note though, that if you're using images instead of divs you can skip some of the CSS.
JS
$(document).ready(function () {
$(".logo").on("mouseenter", function () {
$(this).find(".hidden").animate({width: "50px"});
}).on("mouseleave", function () {
$(this).find(".hidden").animate({width: "0px"});
});
});
HTML
<div class="logo">
<div class="part">M</div><div class="hidden">edia</div><div class="part">M</div><div class="hidden">antra</div>
</div>
CSS
.part, .hidden {
width: 50px;
height: 50px;
background: red;
display: inline-block;
font-size: 24px;
text-align: center;
vertical-align: top;
}
.hidden {
width: 0px;
overflow: hidden;
}
Try this out :
<div class="media">
<span class="big">M</span>edia
</div>
<div class="mantra">
<span class="big">M</span>antra
</div>
Css:
.media,.mantra{
width:28px;
overflow: hidden;
float:left;
margin-left:2px;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
cursor: pointer;
}
.media:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.mantra:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
}
.big{
font-size: 2em;
color: #ff8800;
}
Working Demo :http://jsfiddle.net/Jiteen/xZ6Hv/
Related
I'm trying to put overlay on my form. Basically I don't want user to access the form and just block the content by adding overlay. I added overlay but I can still give inputs in input fields. How do I stop that?
.overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
opacity: 0;
width: 100 %;
height: 100 %;
-webkit-transition: all 0.3s ease - in -out;
-moz-transition: all 0.3s ease - in -out;
-o-transition: all 0.3s ease - in -out;
-ms-transition: all 0.3s ease - in -out;
transition: all 0.3s ease - in -out;
opacity: 1;
}
<h1>Hello Plunker!</h1>
<div class="overlay">
<input type="text">First name
</div>
Like this?
.content {
text-align: center;
opacity: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition: all 0.3s ease - in -out;
-moz-transition: all 0.3s ease - in -out;
-o-transition: all 0.3s ease - in -out;
-ms-transition: all 0.3s ease - in -out;
transition: all 0.3s ease - in -out;
opacity: 1;
}
.overlay {
background: rgba(0, 0, 0, .75);
position: absolute;
width: 100%;
height: 100%;
}
<h1>Hello Plunker!</h1>
<div class="content">
<div class="overlay">
</div>
<input type="text">First name
</div>
Hope this helps.
Try this
.wrapper {
position: relative;
}
.overlay{
position: absolute;
width: 100%;
height: 100%;
}
.form-wrapper {
text-align: center
}
<div class="wrapper">
<div class="overlay"></div>
<div class="form-wrapper">
<input type="text">First name
</div>
</div>
A very simple & efficient way of doing this without extra & unnecessary divs is using ::after pseudo class.
It makes layering very easy.
HTML
<div class="form">
First name
<input type="text">
</div>
CSS
.form{
width:300px; /*Or what ever width you choose*/
height:400px; /*Or what ever height you choose*/
position: relative;
z-index:1;
}
.form:after{
position:absolute;
height: 100%;
width:100%;
content:'';
z-index:5; /* Make sure this value is higher than the .form class */
top:0;
left:0;
}
This is should do it :)
Here is a fiddle for a working demo.
I have a problem close my drop down menu in mobile devices only. Is there a way how to remove classes i added before?
There is a Css hover for desktop and clickable for mobile devices.
Thank you for any answers.
$(document).ready(function(){
$('.drop_helper').on("click",function() {
$('.drop_nav').toggleClass('dropped');
$('.drop_helper').toggleClass('dropped_on').toggleClass('drop_down_btn');
});
});
li.drop_down_btn {
color:#a3a3a3;
}
li.drop_down_btn:after {
color:#a3a3a3;
font-family: 'FontAwesome';
content: "\f107";
font-size:16px;
padding-left: 9px;
}
li.drop_down_btn:hover {
cursor: pointer;
color:#1b2532;
}
li.drop_down_btn:hover:after {
font-family: 'FontAwesome';
content: "\f106";
color:#1b2532;
}
ul.drop_down {
position: relative;
display: inline-block;
list-style-type:none
}
ul.drop_nav {
list-style-type:none;
visibility: hidden;
opacity:0;
position: absolute;
text-align: left;
line-height: 26px;
/* background:url(bg_drop_down.png);*/
background-color:#FCFCFC;
padding:20px;
margin-left:-20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
khtml-border-radius: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.drop_nav li a {
display: block;
}
ul.drop_down:hover ul.drop_nav {
visibility: visible;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2000
}
ul.dropped {
visibility: visible;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2000;
}
.dropped_on:after {
color: #1b2532;
font-family: 'FontAwesome';
content: "\f106";
font-size: 16px;
padding-left: 9px;
}
.dropped_on:hover {
cursor:pointer
}
.drop_down:hover .drop_down_btn {
color: #1b2532;
}
.drop_down:hover .drop_down_btn:after {
color: #1b2532;
font-family: 'FontAwesome';
content: "\f106";
}
.drop_down .menu_btn a{
color: #a3a3a3;
}
.drop_down .menu_btn a:hover {
color: #1b2532;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drop_down">
<li class="drop_helper drop_down_btn">Category</li>
<ul class="drop_nav">
<li><a title="Food" href="/posts/food/">Food</a></li>
<li><a title="Fashion" href="/posts/fashion/">Fashion</a></li>
<li><a title="Entertainment" href="/posts/entertainment/">Entertainment</a></li>
</ul>
</ul>
Your question is a bit unclear but yes with a little bit of jQuery it's easy to remove a class, for example:
$('.drop_nav').removeClass('dropped');
Will remove the dropped class from elements with the drop_nav class.
EDIT
To also trigger on mobile touch events add the touchstart event to your jQuery.on like so:
$('.drop_helper').on('click touchstart'), function() {
...
Firstly let me say I'm starting to realize I need to learn jQuery, and while I'm here asking for help, this weekend I'm going to hit the Treehouse jQuery videos hard.
I'd like a little help with an effect I'm trying to create with a navigation menu please, if you take a look at the fiddle I've made:
http://jsfiddle.net/number8pie/kvMkF/4/
As you can see there's a list of navigation links and over them is the text corresponding to the link. What I'd like is for that text to initially not be view-able to anyone except screen readers, and when a user mouse-over's a link the corresponding text slides from behind the leftmost list item into visibility, and the text that says "NAVIGATE" disappears. I'd like all of the text to slide from where it is initially and to the same place, where the "NAVIGATE" text is.
I'm open to the solution being only CSS (don't think its possible with only CSS), jQuery or JavaScript.
Thanks in advance for any help, and I'll make sure to start learning jQuery as soon as I can.
Here's the code:
HTML:
<nav class="main-nav">
<p class="nav-hvr-init">Navigate</p>
<ul> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
<li id="about-us">
<a class="nav-link" href="#"></a>
<span class="nav-text">about us</span>
<li id="products">
<a class="nav-link" href="#"></a>
<span class="nav-text">products</span>
<li id="the-team">
<a class="nav-link" href="#"></a>
<span class="nav-text">the team</span>
<li id="environment">
<a class="nav-link" href="#"></a>
<span class="nav-text">environment</span>
<li id="contact">
<a class="nav-link" href="#"></a>
<span class="nav-text">contact</span>
</ul>
</nav>
CSS:
#nav-row {
background-color: #CCFFCC;
}
#nav-col {
height: 56px;
padding-top: 0;
background-color: #336600;
}
.main-nav {
height: 56px;
margin: 0 auto;
background-color: #336600;
position: relative;
}
.main-nav ul li {
height: 56px;
width: 56px;
margin: 0;
font-size: 21px;
display: inline-block;
text-transform: uppercase;
}
#about-us {
background: #66CC66 url('http://s10.postimg.org/xqx00ofzp/about_us.png') no-repeat center;
}
#about-us:hover {
background: #66CC66 url('http://s10.postimg.org/9borzmh2t/about_us_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#about-us:active {
background: #66CC66 url('http://s10.postimg.org/ekjsxhzhx/about_us_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#products {
background: #33CC33 url('http://s10.postimg.org/defsypb79/products.png') no-repeat center;
}
#products:hover {
background: #33CC33 url('http://s10.postimg.org/y2j1r6lth/products_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#products:active {
background: #33CC33 url('http://s10.postimg.org/6p99iopv9/products_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#the-team {
background: #339900 url('http://s10.postimg.org/4sh4ruol1/the_team.png') no-repeat center;
}
#the-team:hover {
background: #339900 url('http://s10.postimg.org/buf2e1s6t/the_team_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#the-team:active {
background: #339900 url('http://s10.postimg.org/wd9yj4645/the_team_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#environment {
background: #006600 url('http://s10.postimg.org/gb7fcq6et/environment.png') no-repeat center;
}
#environment:hover {
background: #006600 url('http://s10.postimg.org/n47s8zx85/environment_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#environment:active {
background: #006600 url('http://s10.postimg.org/6y6u8m2np/environment_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#contact {
background: #003300 url('http://s10.postimg.org/9pq3z816d/contact.png') no-repeat center;
}
#contact:hover {
background: #003300 url('http://s10.postimg.org/udordymet/contact_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#contact:active {
background: #003300 url('http://s10.postimg.org/4scje3z79/contact_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
.main-nav > ul {
height: 56px;
line-height: 100%;
margin: 0;
position: relative;
float:right;
padding: 0;
}
li > svg {
margin: 9% 0 0 11%;
}
li > a {
display: block;
padding: 0;
margin: 0;
}
.nav-link {
margin: 0;
height: 56px;
}
.nav-text {
color: #FFFFFF;
font-family: 'Arial Black';
font-size: 21px;
position: absolute;
left: 0;
bottom: 0;
}
.nav-hvr-init {
color: #FFFFFF;
font-family: 'Arial Black';
font-size: 21px;
text-transform: uppercase;
line-height: 100%;
margin-right: 4px;
margin-bottom: 0;
position: absolute;
right: 280px;
bottom: 0px;
opacity: 0.2;
}
.txt-arrows {
font-family: 'Arrows';
font-size: 18px;
text-transform: none;
margin-bottom: 3px;
margin-left: 4px;
}
How about that? Is this what you wanted?
I also added sr-only class (from Bootstrap).
http://jsfiddle.net/kvMkF/8/
$( ".nav-link" ).hover(
function() {
var text = $( this ).siblings( "span" ).html();
$(".nav-hvr-init")
.stop()
.animate({right: '0px'},200,function() {
$(this).html(text).animate({right:'280px'},200);
});
}, function() {
$(".nav-hvr-init")
.stop()
.animate({right: '0px'},200,function() {
$(this).html('Navigate').animate({right:'280px'},200);
});
}
);
Quick and easy.
jQuery:
$( ".nav-link" ).hover(
function() {
var ntext = $( this ).siblings( "span" ).html();
$( ".nav-hvr-init" ).html( ntext );
}, function() {
$( ".nav-hvr-init" ).html( "Navigate" );
}
);
Also added display: none; to .nav-text
jsFiddle
$(".main-nav li").hover(function(){
$(".nav-hvr-init").fadeOut();
$(this).find('.nav-text').show().animate({left : '150px'});
}, function(){
$(".nav-hvr-init").fadeIn();
$(this).find('.nav-text').animate({left : '-100%'});
});
here is a fiddle
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);
});
Some images in my website needs to be darken when hovered, and also in the same time, to expose text that was hidden before that hover(the text will be displayed on top of the darken image).
I already implemented the img-darken part this way - http://jsfiddle.net/4Dfpm/.
What is a good way to implement the "expose text on hover(the same hover)" part?
Can it be done only with CSS, or I'll need to use a script this time ?
Thanks.
** How the img-darken part already implemented:
a.darken {
background: black;
}
a.darken img {
display: block;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
CSS Solution
Worked on your jsfiddle and changed jsfiddle is http://jsfiddle.net/4Dfpm/55/
I have added < span > inside < a > tag with class=darken
<span>text</span>
And updated css is
a.darken{
...;
position:relative;
...
}
new css added is
a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
Obvious jQuery solution: Add the message in the markup:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
<span class="message">Some message here</span>
</a>
Add some css:
a.darken span{
display:none;
position:absolute;
top:0px; left:0px;
float:left;
color:white
}
Sprinkle of JQuery:
$('.darken').hover(
function(){
$(this).find('.message').fadeIn(1000);
},
function(){
$(this).find('.message').fadeOut(1000);
}
);
Et Voila: http://jsfiddle.net/4Dfpm/56/
Use a script to do that
HTML:
<div class="hoverText">Some text</div>
Js:
$("img").hover(
function () {
$(".hoverText").show();
},
function () {
$(".hoverText").hide();
}
);
Css:
div.hoverText{display = none;}
This a fiddle:
http://jsfiddle.net/HFgGx/
Adjust this mockup with your logic ;)
If you add a span inside the anchor, give it an RGBA color of white with no alpha, then on hover change the alpha value, you'll get the effect you want with CSS alone:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
<span>text</span>
</a>
Don't forget to position the span within the anchor, so that it doesn't display beneath the image.
a.darken {
display: inline-block;
background: black;
padding: 0;
position: relative;
}
a.darken span
{
position: absolute;
top: 10px;
left: 10px;
color: rgba(255, 255, 255, 0);
}
a.darken:hover span
{
color: rgba(255, 255, 255, 1);
}
http://jsfiddle.net/Kyle_Sevenoaks/4Dfpm/57/
Check the fiddle :
http://jsfiddle.net/4Dfpm/59/
all done throught css. althought you can achieve it with jQuery too,
your html i edited little bit:
<a href="http://google.com" class="darken">
<img src="http://callzeb.com/themes/images/JQuery_logo.png">
<span>123</span>
</a>
and edited little bit of css too:
a.darken {
display: inline-block;
background: black;
padding: 0;
width:229px;
height:200px;
overflow:hidden;
position:relative;
text-align:center;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
a.darken:hover span{
display:block;
position:absolute;
z-index:9999;
bottom:10px;
color:red;
font-size:24px;
}
span{display:none;}
Try this http://cssdesk.com/hrKeE
.captioned {
position:relative;
display:inline-block;
}
.captioned img {
display:block;
}
.captioned .caption {
position:absolute;
top:0;
left:0;
display:none;
width:100%;
height:100%;
color:white;
background:rgba(0, 0, 0, .75);
}
.captioned:hover .caption {
display:block;
}