Google Plus Like Hash Tag Style Effect
Reading Time:
Reading Time:
Let’s start by creating the Markup for the Hash Tags.
div
with a class named postcontainer
tag
<div class="post">
<div class="container">
<div class="tags">
<div class="tag">#Cooking</div><br/>
<div class="tag">#Learning</div><br/>
<div class="tag">#PHP</div>
</div>
</div>
</div>
I have made the container div to be 200 by 200 pixels so that it has a nice square shape. I also have added some border styles to it.
The post class div is used as an relative positioning to the tags. By this way we can specify the area around which the tags should be places. The tags are place with a absolute positioning to the post class div.
A hovered
class will be used when the mouse is hovered over the tag
classed divs.
.post {
position: relative;
z-index: 1;
font-family:
}
.container {
padding: 5px;
border: 1px solid lightgray;
width: 200px;
height: 200px;
color: #427FED;
background-color: #F7F7F7;
border-color: white;
border-style: solid;
border-radius: 3px;
border-width: 1px;
}
.tag {
display: block;
float: right;
background-color: #D8D8FF;
padding: 0 8px 0 8px;
width: auto;
position: absolute;
max-width: 100px;
text-align: center;
margin: 3px -8px 3px -10px;
color: grey;
}
.hovered {
background-color: #427FED;
color: white;
box-shadow: 0 0 5px #D8D8D8;
}
This script uses jQuery library. So in your project you should include the jQuery library or you can use any one of the CDN (Content Delivery Network) like Google CDN to get the script.
At first we initialize the required variable,
container
class containing the tagstag
classed divEvery variable above is a jQuery variable. Then with these variable we bind the mouseenter and mouseleave event to modify the classes a little bit. We use the jQuery css and on methods to modify those div styles to achieve this effect.
$(function() {
// set the variables initally.
var tagsContainer = $('.tags'),
tags = tagsContainer.find('.tag'),
firstTag = tagsContainer.find('.tag').first();
function showFirst() {
// Hide all the tags first
tagsContainer.find('.tag').css('z-index', -1);
// Show only the first tag
firstTag.css('z-index', 0);
}
// Initially show only the first tag
showFirst();
// when the user hovers over the tag show all the tags.
tags.on('mouseenter', function() {
$(this).siblings('div').css('z-index', 0);
$(this).toggleClass('hovered');
});
// toggle the style class when the user leaves the tag.
tags.on('mouseleave', function() {
$(this).toggleClass('hovered');
});
// When the cursor leaves the container, show only the first tag.
tagsContainer.on('mouseleave', function() {
showFirst();
});
});
All the code is placed inside a anonymous function and passed into the jQuery function so that is executes when the document is ready and we can reduce the global variables this way.