Bootstrap Snippet Hover Effect with Service Pannel using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="wrapper">
  <div class="panel animated slideInDown">
    <img src="my image" alt="" />
    <h3>Design Services</h3>
    <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <div class="slide">
      <h4>Services</h4>
      <ul>
        <li><i class="fa fa-check"></i> Project Strategy and Planning </li>
        <li><i class="fa fa-check"></i> Content Management Systems</li>
        <li><i class="fa fa-check"></i> Email Marketing</li>
        <li><i class="fa fa-check"></i> Mobile App Development</li>
        <li><i class="fa fa-check"></i> Usability Testing</li>
        <li><i class="fa fa-check"></i> Responsive Development</li>
         <li><i class="fa fa-check"></i> Scheduled Maintenance</li>
         <li><i class="fa fa-check"></i> eCommerce Solutions</li>
      </ul>
    </div>
  </div>
  <div class="panel animated slideInDown">
    <img src="my image" alt="" />
    <h3>Development Services</h3>
    <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <div class="slide">
      <h4>Services</h4>
      <ul>
        <li><i class="fa fa-check"></i> Project Strategy and Planning </li>
        <li><i class="fa fa-check"></i> Content Management Systems</li>
        <li><i class="fa fa-check"></i> Email Marketing</li>
        <li><i class="fa fa-check"></i> Mobile App Development</li>
        <li><i class="fa fa-check"></i> Usability Testing</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  color: #808080;
  background: #39cc62;
}
ul{
    list-style:none;
    padding:0;
}
.wrapper {
  margin: 40px auto;
  width: 930px;
  height: 500px;
}
.wrapper::before, .wrapper::after {
  content: "";
  display: table;
  clear: both;
}
.wrapper .panel {
  position: relative;
  margin: 50px 20px;
  padding: 0 20px 20px;
  overflow: hidden;
  float: left;
  width: 270px;
  height: 450px;
  text-align: center;
  background: #F1F1F1;
  border: 1px solid #30bb57;
  box-sizing: border-box;
  transition: border 200ms ease;
  cursor: pointer;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

" Hover Effect with Service Pannel "
Bootstrap 3.3.0 Snippet by Pawan Pandey

Related: See More

Questions / Comments:

" Hover Effect with Service Pannel " Bootstrap 3.3.0 Snippet by Pawan Pandey

Related: See More

Questions / Comments:

" Hover Effect with Service Pannel "
Bootstrap 3.3.0 Snippet by Pawan Pandey