We Keep Coding

How to fade child div when parent is hovered

I have a div that has class name ordershape and it contains another div fad-res.
I want that when I would hover over a particular ordershape, I want to show the corresspondingfad-res whose parent div I hovered, while other divs must be hidden.
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>

Your HTML is invalid since you haven't closed the div with the class ordershape
No reason to use jquery for this, CSS can easily achieve this:
.ordershape:hover .fad-res{
display:block;
}
Demo CSS
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
.ordershape:hover .fad-res{
display:block;
}
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>
If you want to do it with jquery do it like this.
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
Demo jQuery
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>

Do not use javascript for that - rely on the CSS transition and opacity properties instead, with :hover selector.
.fad-res {
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
background: #555555;
height: 60px;
width: 100px;
}
.ordershape {
background: #f6f6f6;
height: 100px;
width: 100px;
float: left;
margin-right: 2px;
}
.ordershape:hover .fad-res {
opacity: 1;
}
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>

Well, you can try the jquery version this way
$(".ordershape").hover(function(){
$(this).find(".fad-res").toggle();
})
.fad-res{
display : none;
}
.ordershape{
width : 20px;
height: 20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>

Adding logo next to Toggle Icon on navbar

I am fresh to HTML & CSS. I have started customizing a Bootstrap template and would like to add a logo next to the icon bar, but this navbar seems way more trickier than the basic Bootstrap navbar that I've played around with. I would really appreciate it if someone could help me out by pointing me where to look in the code, or by providing one or two examples. Here is the link to the template I am customizing. I would like to place an image right next to the toggle button like this one does with "Menu".
HTML:
<nav id="navigation" class="navbar scrollspy">
<!-- .container -->
<div class="container">
<div class="navbar-brand">
<img src="images/logo.png" alt="Logo" /> <!-- site logo -->
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Portfolios</li>
<li>Why Us?</li>
<li>Page</li>
<li class="menu-btn">Contact</li>
</ul>
</div>
<!-- .container end -->
</nav>
CSS:
/* Navigation Mobile */
#navigation_mobile {
display:none;
font-size:14px;
line-height:18px;
text-align:center;
font-weight:600;
text-transform:uppercase;
}
#navigation_mobile .nav-menu-links {
display:none;
background-color:#2a2a2a;
}
#navigation_mobile ul {
padding:30px 100px;
margin:0px;
}
#navigation_mobile ul li {
list-style-type:none;
padding:11px 0px;
}
#navigation_mobile ul li a {
display:block;
color:#a9a9a9;
}
#navigation_mobile ul li a:hover { color:#FFF; }
#navigation_mobile .nav-menu-button {
background-color:#202020;
padding:15px 0px 14px;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle {
color:#a9a9a9 !important;
font-size:24px;
line-height:1;
background:none;
padding:0px;
border:0px;
border-radius:0px;
-webkit-transition:color .2s ease;
transition:color .2s ease;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle:hover { color:#FFF !important; }
#header .navbar { display:none;}
#navigation_mobile { display:block; }

You could simply add the text to the image. And define the text in the image by:
<img src="logo.png" alt="My Logo">

Add ease out effect with jQuery

I need to add an ease effect to the .dropdown div when it becomes visible with jQuery, but I'd be happy to do it with CSS as well. Any ideas? Thanks in advance :)
$('.btn').bind('click', function (){
$(this).parent().next('.dropdown').toggleClass('open');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
height: 50px;
position: absolute;
color: black;
visibility: hidden;
}
.open {
position: relative;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div class="dropdown">
<p>Hidden content</p>
</div>
<div class="bottom">
</div>
https://jsfiddle.net/319zd1sg/1/

1 second fade in (https://jsfiddle.net/nh2fj27g/1/).
$('.btn').bind('click', function (){
var $dropdown = $(this).parent().next('.dropdown');
$dropdown.hasClass('open') ? $dropdown.toggleClass('open').animate({opacity: 0},1000) : $dropdown.css({opacity: 0}).toggleClass('open').animate({opacity: 1},1000);
});

Hope this helps.
$('.btn').bind('click', function() {
$('#drop').slideDown('slow');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
display: block;
color: black;
width: 100%;
}
.drop {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div id="drop" class="drop">
<div class="dropdown">
<p>Hidden content</p>
</div>
</div>
<div class="bottom">
</div>

Shift menu vertically and display sub menu

I am trying to write one vertical menu like in this website . On hover the vertical menu should shift marginally to the right side and should display the sub menu.
I have been failed to accomplish this.
Please help me :(
<html>
<head>
<title></title>
<style>
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>

Here's the solution, I used JQuery:
HTML:
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS:
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
JQuery:
$(document).ready(function(){
$(".one").mouseenter(function(){
$(".apear").show(500);
});
$(".apear").mouseleave(function(){
$(".apear").hide(500);
});
});
Here is a fiddle

click next and previous to show overflow div

I have a lot of overflow:hidden; items, how can I show overflow:hidden; items when I click next and previous like in my example below? I would also like to have moving forward and backward effect. I have tried some plugin but it doesn't work when I click next and prev. Any idea of how to do that easily ?
.container{
width:580px;
height:70px;
background:#ccc;
overflow-y:hidden;
}
.item{
display:inline-block;
z-index:5;
background:#fff;
margin:5px;
padding-top:10px;
width:100px;
height:50px;
text-align:center;
}
.prev , .next{
cursor:pointer;
width:50px;
}
.prev:hover , .next:hover{
background:#000;
color:#fff;
}
<div class="prev">Prev</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div class="next">Next</div>