How to convince people to click when hovering?

I got this now:

http://ift.tt/1IoHAAq

And what I want is like something that when people hover over one tab, they get some sort of animation or something to convince them to click.

Does anyone has a good idea, and maybe even a sample code of it?

Stacking three divs and centering them vertically?

This question may have already been answered, but I didn't see anything regarding it while searching, and I'm having a hard time understanding the many ways of centering div's.

Basically, I'm building a small portfolio site and would like to have it laid out in a two column format. The left column will house my logo, and the right column will have a series of three links, which I would like to stack vertically and then also center. I cannot for the life of me, figure out the CSS to get this to work. Here's what I have so far:

<div class="row main">
        <div class="col-xs-6 leftMain">
            <img src="img/logo.png" class="logo" alt="myName">
        </div>
        <div class="col-xs-6 rightMain">
           <div class="resume button"><a href="resume.html" class="btn">Resume</a></div>
           <div class="portfolio button"> <a href="portfolio.html" class="btn">Portfolio</a></div>
           <div class="contact button"><a href="mailto:me@me.com" class="btn">Contact</a></div>
        </div>
    </div>

And my CSS:

.main {
    display: flex;
}

.leftMain {
    display: inline-block;

}

.rightMain {
    display: inline-block;

}

.logo {
    display: table;
    margin: 0 auto;
}

.button {
    display: table;
    margin: 0 auto;
}

This works reasonably well, but the links in rightMain do not center vertically. As most of the solutions I've looked up involve the display property, I figured I may as well just ask the full question, rather than trying to integrate multiple solutions for different centering problems. I plan on making it responsive eventually, having the right column move beneath the left on smaller windows. Any ideas?

Weird gradient border effect

When applying a transparent border over an element with a linear-gradient as the background, I get a weird effect.

Notice the left and right sides of the element don't have the proper colours (they're some way switched) and are weirdly flat.

HTML

<div class="colors">
</div>

CSS

.colors {
    width: 100px;
    border: 10px solid rgba(0,0,0,0.2);
    height: 50px;
    background: linear-gradient(to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5);
}

Why is this showing a weird effect on the left and right side of the element, and What can I do about it?

Here is the fiddle: http://ift.tt/1GV54uG

how to make rating bar with font awesome icon?

I want to creat rating bar with font awesome icon. but , I can't make a icon that fill part of that (%) by color. like this image : enter link description here

6 sub-DIV's, one container DIV, Grouped in 3 pairs of 2, left,center,right justified

Was my title strong enough?

I want a DIV that goes a horizontal length of a page, then I want 6 divs inside of that that are grouped in 2 (info, pic) Where the group on the left is fastened to the wall, the group on the right is fastened to the wall, and the group in the center is exactly in the center.

Here's my code so far:

<div class="contactus.container">

<div class="contactus.left">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>
<div class="content" style="display:inline-block" >
    <img align="left" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>

<div class="contactus.center">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>

<div class="content" style="display:inline-block">
    <img align="left" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>

<div class="contactus.right">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>

<div class="content" style="display:inline-block;">
    <img align="right" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>
<div style="clear:both;"></div>
</div>

And here's the CSS:

.contactus.container {
    width:100%;
    text-align:center;
}

.contactus.left {
    float:left;
    width:100px;
}

.contactus.center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

.contactus.right {
    float:right;
    width:100px;
} 

.content {
    display: inline-block;
      vertical-align: top;

Getting al ittle frustrated now. All it does is have a line down the left side. All 6 divs.

html - play gif once on hover and play reversed on mouseout

I want to have a GIF that plays once when you mouse over it and pauses on the last frame, and then when you move the mouse off the image it should play backwards and pause on the first frame.

I have a static image for the first and last frame, as well as separate animated GIFs playing the animation forwards and backwards, I just have no clue how I would go about programming this.

Optimally I would just use CSS but from what I know it doesn't seem possible without js/jquery, however if anyone has any ideas it would be greatly appreciated.

How to Hide particular div tag using media query, CSS, Javascript, Jquery for tablet device

How to Hide particular div tag using media query, CSS, Javascript, Jquery for tablet device.

I am trying to hide only second div inside [class="row grid-container-960"]...

<div class="row grid-container-960">
    <div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
    <div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
    <div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
    <div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
</div>

@media (max-width: 1024px) {
    .r-footer-propertylinks .row div {
        display:none
    }
}