I have this HTML document:
<div id="c">
<div class="base">
<div class="cb" id="red" data-color="Red">
</div>
</div>
<div class="base">
<div class="cb" id="green" data-color="Green">
</div>
</div>
<div class="base">
<div class="cb" id="blue" data-color="Blue">
</div>
</div>
</div>
and this is my CSS:
<style type="text/css">
.cb {
display: inline-block;
background-color: #56a100;
width: 70%;
height: 70%;
margin-top: 15%;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cb:hover {
display: inline-block;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
width: 100%;
height: 100%;
margin-top: auto;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.base {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 5px;
margin-top: 20px;
border-style: ridge;
text-align: center;
vertical-align: central;
}
</style>
but when I put mouse on one of the .cb elements the others go down!
you can see Demo Here. Does anybody how to stop the other elements to going down?
Remove display: inline-block; from .base class and make it float to the left float: left;.
Here's fixed demo http://jsfiddle.net/pTCFL/2/
Related
I have a few elements
<div class="nav-link active"><span>Element 1</span></div>
<div class="nav-link"><span>Element 2</span></div>
<div class="nav-link"><span>Element 3</span></div>
where the active would change on click and css to add a red rhombus underneath the active div:
.nav .nav-link.active span::after{
content: "";
width: 120%;
height: 0.14em;
background: red;
transform: skewX(-45deg);
list-style: 0.5em;
display: block;
margin: 0 auto;
position: relative;
left: -20px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
and would like to change the position of that red rhombus on the .nav-link by having it animate slide in from the left based on if the div contains .active. However adding:
.nav .nav-link span::after{
left: -200px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
doesn't appear to work. Is this possible or am I taking the wrong approach?
You can used translateX to animated left slide.
.nav .nav-link.active span::after{
content: "";
width: 120%;
height: 0.14em;
background: red;
transform: skewX(-45deg) translateX(100px);
list-style: 0.5em;
display: block;
margin: 0 auto;
position: relative;
left: -20px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div class="nav">
<div class="nav-link active"><span>Element 1</span></div>
<div class="nav-link"><span>Element 2</span></div>
<div class="nav-link"><span>Element 3</span></div>
</div>
i have an image and a border around it i want to add blur hover to the image only but the blur covers the image and the border here's the code
.ex{
border-radius: 1000px;
margin-right: 20px;
border: 10px solid #fff;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex:hover{
-webkit-filter: blur(5px);
cursor:pointer;
<img src="img/13.jpg" alt="" width="200" height="200" class="ex">
You can wrap the image in a parent element, then that element to create the circle border, and give it a positive z-index so the image doesn't pop out when you apply filter.
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.ex {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
max-width: 100%;
display: block;
}
.wrap:hover {
cursor: pointer;
}
.wrap:hover .ex {
-webkit-filter: blur(5px);
}
<div class="wrap">
<img src="https://scontent-dft4-1.cdninstagram.com/t51.2885-15/e35/17266233_1741922516118154_2155597975093510144_n.jpg" alt="" class="ex">
</div>
Wrap your image with a div, set the div size and overflow:hidden and you archive that.
.img-wrapper-for-blur {
border-radius: 1000px;
width: 200px;
height: 200px;
overflow: hidden;
}
removing border-radius from your .ex style and the markup changed by this:
<div class="img-wrapper-for-blur">
<img src="img/13.jpg" alt="" width="200" height="200" class="ex">
</div>
Instead of using a border, you can wrap the image in a div, give that div some padding and a white background, and then leave the blur on the image.
HTML
<div class="border">
<img src="http://www.placehold.it/200x200" alt="" width="200" height="200" class="ex">
</div>
CSS
.ex {
border-radius: 100%;
overflow: hidden -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex:hover {
-webkit-filter: blur(5px);
cursor: pointer;
}
.border {
border-radius: 100%;
margin-right: 20px;
background-color: #fff;
display: inline-block;
padding: 10px;
}
Here is a fiddle: https://jsfiddle.net/fm1hLy6h/
I'm trying to center a div element.
Example, its floating left, but it wont be in the center.. ->
Any suggestions?
.grid_3 {
margin-top:20px;
text-align:center;
margin-bottom:20px;
display: inline-block;
margin: 0 auto;
}
.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>
You can center them by creating a parent div and adding text-align: center;
CSS
.container {
text-align: center;
}
.container {
text-align: center;
}
.grid_3 {
margin-top:20px;
text-align:center;
margin-bottom:20px;
display: inline-block;
margin: 0 auto;
}
.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
<div class="container">
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>
</div>
You can use CSS Flexbox. Wrap your grids into a <div> named grid-flex (in my case), and give it following properties:
.grid-flex {
display: flex; /* Flex Container */
align-items: center; /* Vertically center the content */
justify-content: center; /* Horizontally center the content */
}
Also remove the <center> tag too, it is now deprecated.
Have a look at the snippet below:
.grid-flex {
display: flex;
justify-content: center;
align-items: center;
}
.grid_3 {
margin-top: 20px;
text-align:center;
margin-bottom:20px;
}
.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
<div class="grid-flex">
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" />
</div>
</div>
</a>
</div>
</div>
</div>
Hope this helps!
Just need a wrapper
The solution is to wrap your two elements in a parent div and then center the parent div.
I wrapped your two elements in a div named wrapper and then referenced the wrapper element and then gave it the following attributes
#wrapper {
margin: 0px auto;
display: table;
}
margin: 0px auto; will horizontally center a container element.
display: table; will make the parent `div auto wrap to the combined children's width.
Working Example
#wrapper {margin: 0px auto; display:table;}
.grid_3 {
margin-top:20px;
text-align:center;
margin-bottom:20px;
display: inline-block;
margin: 0 auto;
}
.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
<div id="wrapper">
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>
</div>
If you are looking to centralise the 2 divs you need to wrap them in a parent div and give it a width and then set margin: 0 auto; to that like so:
HTML:
<div class="grid_wrapper">
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>
</div>
CSS:
.grid_wrapper {
width:500px; //change this to whatever you want
margin: 0 auto;
}
I would like to have rotate and zoom efect on pictures here
http://cpband.itvp.eu/
, but i would like to keep them croped in the same box.
like here
http://cpband.itvp.eu/test.php
trick should be in
overflow: hidden;
, but I am not able to figureout how to make it work.
Thanks for the tips!
you may add the rotation to the container :
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover {
transform:rotate(15deg);
}
.grow:hover img {
width: 400px;
height: 400px;
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
or is only to the image ? Also, transform can do both(zoom&rotate)
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover img {
transform:rotate(15deg) scale(1.25);
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
Html:
<div id="container">
<img src="picture.jpg" id="picture" />
</div>
Css:
#container{
overflow:hidden;
width:100px;
height:100px;
}
#picture{
height:300px;
width:300px;
}
I am brand new to coding.
I am trying to get text to appear when the user rolls over an image, like these images here: http://www.enthusiastic.co/
So far I have this:
#imagelist {
font-size: 0;
}
#imagelist a {
margin: 5px;
display: inline-block;
background: #000;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#imagelist img {
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
height: 300px;
o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#imagelist img:hover {
opacity: .2;
width: 400px;
height: 300px;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#imagelist span {
display: none;
font-size: 13px;
color: red;
}
#imagelist span:hover {
display: block;
}
<div id="imagelist">
<a href="https://google.com" target="_blank">
<img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
<span>View</span>
</a>
</div>
I know it has something to do with the span tag but I can't figure it out. Any help would be much appreciated. Thanks.
What you need is to set the :hover action to the a tag and also use absolute position for the span. Check this:
#imagelist {
font-size: 0;
}
#imagelist a {
margin: 5px;
display: inline-block;
background: #000;
-webkit-border-radius: 4px;
border-radius: 4px;
position:relative;
}
#imagelist img {
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
height: 300px;
o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#imagelist a:hover img{
opacity: .7;
width: 400px;
height: 300px;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#imagelist span {
display: none;
font-size: 23px;
color: red;
line-height:300px;
text-align:center;
position:absolute;
top:0;left:0;
width:100%;
}
#imagelist a:hover span{
display: block;
}
<div id="imagelist">
<a href="https://google.com" target="_blank">
<img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
<span>View</span>
</a>
</div>
Here's an easy code on bootply:
http://www.bootply.com/90238
It uses bootstraps native features along with this tiny bit of JS
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);