Rows with image hover effect

Developer
Amit Verma
Size
12,875 Kb
Views
8,096
  1. Rows with image hover effect Previews
  2. Rows with image hover effect HTML Codes
  3. Rows with image hover effect CSS Codes

How do I make an rows with image hover effect?

What is a rows with image hover effect? How do you make a rows with image hover effect? This script and codes were developed by Amit Verma on 18 January 2023, Wednesday.

Rows with image hover effect Previews
IQ Test

Rows with image hover effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rows with image hover effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content bg-blue"> <h1 class="tab center bounds padding active"><span>Products</span></h1> <div class="bounds padding"> <a href="/Main/Page/Products" class="item zoom active"> <div class="column"> <div class="image"> <img id="ctl00_body_rptProducts_ctl00_imgProduct" class="cover accelerate" src="https://bufiles.blob.core.windows.net/co3657/products/bvh_products1.jpg" alt="antimicrobial alphasan additive prevents odors" />	<div class="link-abs">	<p class="link-col-text">View More...</p>	</div> </div> </div> <div class="column"> <div class="text"> <h2>HENKEL POLYBIT CONSTRUCTION CHEMICALS</h2> <p><span class="text-smaller">Waterproofing. Industrial Flooring. Structural Repair. Sealants and Adhesleves.</span></p> </div> </div> </a> <a href="/dispersitech-pigment-dispersion/" class="item zoom active"> <div class="column"> <div class="image"> <img id="ctl00_body_rptProducts_ctl01_imgProduct" class="cover accelerate" src="https://bufiles.blob.core.windows.net/co3657/products/bvh_products2.jpg" alt="Dispersitech Pigment Dispersion" />	<div class="link-abs">	<p class="link-col-text">View More...</p>	</div> </div> </div> <div class="column"> <div class="text"> <h2>PIGMENTS FOR CONCRETE</h2> <p><span class="text-smaller"></span></p> </div> </div> </a> <a href="/liquitint-polymeric-colorants/" class="item zoom active"> <div class="column"> <div class="image"> <img id="ctl00_body_rptProducts_ctl02_imgProduct" class="cover accelerate" src="https://bufiles.blob.core.windows.net/co3657/products/bvh_products5.jpg" alt="Transparent polypropylene polymeric colorants" />	<div class="link-abs">	<p class="link-col-text">View More...</p>	</div> </div> </div> <div class="column"> <div class="text"> <h2>INDUSTRIAL CHEMICALS</h2> <p><span class="text-smaller"></span></p> </div> </div> </a> <a href="/reactint-polymeric-colorants/" class="item zoom active"> <div class="column"> <div class="image"> <img id="ctl00_body_rptProducts_ctl03_imgProduct" class="cover accelerate" src="https://bufiles.blob.core.windows.net/co3657/products/bvh_products4.jpg" alt="reactint coloring technology polyurethane thermoset resins" />	<div class="link-abs">	<p class="link-col-text">View More...</p>	</div> </div> </div> <div class="column"> <div class="text"> <h2>LIGHT INDUSTRIAL EQUIPMENT</h2> <p><span class="text-smaller"></span></p> </div> </div> </a> <a href="/reactint-polymeric-colorants/" class="item zoom active"> <div class="column"> <div class="image"> <img id="ctl00_body_rptProducts_ctl03_imgProduct" class="cover accelerate" src="https://bufiles.blob.core.windows.net/co3657/products/bvh_products3.jpg" alt="reactint coloring technology polyurethane thermoset resins" />	<div class="link-abs">	<p class="link-col-text">View More...</p>	</div> </div> </div> <div class="column"> <div class="text"> <h2>POLYPLAST CONSTRUCTION CHEMICALS</h2> <p><span class="text-smaller">Concrete Production. Other Products.</span></p> </div> </div> </a>	</div>
</div>
</body>
</html>

Rows with image hover effect - Script Codes CSS Codes

.link-abs { position: absolute;	left: 0;	right: 0;	bottom: 0;	text-align: center;	background: transparent;	transition: all 0.5s ease;
opacity: 0;
}
.link-abs:hover {	position: absolute;	left: 0;	right: 0;	bottom: 0;	text-align: center;	background: rgba(0, 0, 0, 0.45);
opacity: 1;
}
.link-col-text {	color: #fff;	font-size: 24px;	text-align: center;	text-transform: uppercase;	font-family: 'Segoe UI';	font-weight: 100;	display: inline-block;	padding-top: 5px;
}
ol,
ul { list-style: none
}
blockquote,
q { quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after { content: none
}
table { border-collapse: collapse; border-spacing: 0
}
* { margin: 0; padding: 0
}
* { outline: none
}
.row:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0
}
a { color: #043189; text-decoration: none; cursor: pointer; cursor: hand
}
a:hover { color: #1c4fb3
}
a:not(.slide),
span:not(.slide) { -webkit-transition-duration: .1s; -webkit-transition-property: color, background-color, opacity, outline; -moz-transition-duration: .1s; -moz-transition-property: color, background-color, opacity, outline; transition-duration: .1s; transition-property: color, background-color, opacity, outline
}
h1,
h2,
h3,
h4,
h5,
h6 { line-height: 1em; margin: .6em 0
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child { margin-top: 0
}
h1 { font-size: 220%
}
h2 { font-size: 160%
}
h3 { font-size: 135%
}
h4 { font-size: 110%; margin-top: 2em
}
h6 { font-size: 110%
}
p+h2,
ul+h2,
ol+h2,
p+h3,
ul+h3,
ol+h3 { margin-top: 1.2em
}
p,
ul,
ol,
table { line-height: 1.6em; margin: .9em 0
}
ul,
ol { margin-left: 2em
}
ol { list-style-type: decimal
}
ul { list-style-type: square
}
em { font-style: italic
}
.text-caps { text-transform: uppercase
}
.text-right { text-align: right
}
.text-smaller { font-size: 80%; line-height: 1.4em
}
.text-large { font-size: 110%
}
.text-larger { font-size: 135%
}
.text-lighter { color: #878787
}
.widow-killer { white-space: nowrap
}
.image-left { float: left; max-width: 50%; margin: 0 30px 8px 0
}
.image-right { float: right; max-width: 50%; margin: 0 0 8px 30px
}
.image-full { width: 100%; margin: 15px 0
}
.moreInfo { background: #f2f1f1; padding: 20px; display: block
}
.moreInfo img { margin-right: 15px; margin-bottom: 25px; max-width: 60px
}
@media only screen and (min-device-width: 768px)and (max-device-width: 1024px) { h1.tab { top: -89px!important }
}
@media screen and (max-width: 1080px) { header nav ul.main>li:not(#search)>a { padding-left: 11px!important; padding-right: 11px!important }
}
@media screen and (max-width: 1010px) { .logo.active img.logo-chemical { height: 90%!important; top: -6%!important }
}
@media screen and (max-width: 640px) { .mobile-hide { display: none!important } h1.tab { text-align: center!important; opacity: 1!important; height: auto!important; top: auto!important; margin: 0 0 20px!important; background: none!important; border-color: transparent!important } h1.tab span { display: inline!important; position: relative; background: none!important; border-color: transparent!important; line-height: 1.2em!important; height: auto!important; margin: 0!important; padding: 0!important; font-size: 110%!important } h1.tab span:before, h1.tab span:after { display: none!important } .column { display: block; width: 100%!important; height: auto!important; float: none!important; margin: 0 0 40px!important } .column .column { padding-left: 0!important; padding-right: 0!important } .products-table .column { margin-bottom: 0!important; padding-left: 0!important; padding-right: 0!important } .products-table .description { border: none!important; padding-top: 0!important } .kickers { min-width: 0!important } .kickers .column { border-bottom: 1px solid #ccc; padding-bottom: 10px!important } a.item { height: auto!important } a.item .column:first-child { height: 160px!important } a.item .column:first-child .image { line-height: 160px!important } a.item .column>.text { width: auto!important; padding-left: 50px!important; background-position: 10px top!important } .bounds, .hero { min-width: 0!important } header { z-index: 4!important; height: 50px!important } header .bounds { height: 100%!important } .logo { top: 50%!important; height: 45px!important; margin-top: -18px!important } .logo img.logo-chemical { left: 85px!important; top: -10%!important; height: 110%!important } .menu-toggle { position: absolute; right: 10px; top: 10px; height: 30px; width: 30px; background: url(/cassette.axd/file/images/nav-menu-toggle-194b500530457e8cbacc91b6b7e81b9bc4f3ed26.png) center no-repeat } body.menu-active header nav { display: block!important } body.menu-active header { position: fixed!important; left: 0; width: 100%; background: #fff } header { opacity: 1!important } header nav { display: none!important; position: fixed!important; left: 0; top: 50px; margin-top: 0!important; bottom: 0!important; width: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #656565; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } header nav ul, header nav .dropdown { visibility: visible!important; opacity: 1!important; position: relative!important; left: auto!important; top: auto!important; padding: 0!important } header nav ul.main { padding-top: 44px!important } header nav li { float: none!important; margin: 0!important; padding: 0!important; border: none!important } header nav a { margin: 0!important; padding: 10px!important; color: #fff!important; font-size: 135%!important; border-bottom: 1px solid #787878; background: none!important } header nav ul ul a { font-size: 100%!important } header #search a { background: none!important; position: fixed; top: 4px; right: 45px; padding: 0!important; border: 0!important } #search .icon-dark { opacity: 1!important } header.search-active #search>a .icon-dark { opacity: 0!important; display: none } #search .icon-x { background-image: url(/css/../images/icon-x-dark-2x.png)!important; background-size: 16px } #search:hover>a .icon-light { display: none!important } .search-field { visibility: visible!important; opacity: 1!important; z-index: 2!important; top: 0!important; left: 0!important; right: 0!important; height: 44px!important } #search input[type="submit"] { width: 44px!important; -webkit-border-radius: 0 } #search label { z-index: 2!important; top: 3px!important } .search-field input[type="text"] { background: #dfdfdf!important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; right: 44px!important; top: 3px!important } #share a { width: auto!important; height: auto!important; text-indent: 0!important } header nav ul .dropdown { display: none!important; background: #4c4c4c!important; -webkit-box-shadow: none!important; -moz-box-shadow: none!important; box-shadow: none!important } header nav li.active .dropdown { display: block!important } header nav .image { display: none!important } header nav li .nav-toggle { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border-left: 1px solid #787878; background: #4c4c4c url(/cassette.axd/file/images/nav-toggle-2x-29bfa026054930272ebd6aa761f8e03ed3833bf9.png) center no-repeat; background-size: 12px 6px } .hero:not(.full-screen) { height: 100px!important } .scroller { height: 0!important; visibility: hidden!important } .content { min-width: 0!important; padding-bottom: 10px!important } .content.sketches { background: url(/cassette.axd/file/images/sketch-top-left-cac4da711b026ec6abc0fc491849f09dd1a3ff01.png) top left no-repeat!important } .hero { min-height: 250px } .hero .text { top: auto!important; bottom: 50px!important; margin: 0!important; padding: 15px!important; background-color: rgba(102, 102, 102, .9)!important; -webkit-transform: translateY(20px)!important; -moz-transform: translateY(20px)!important; transform: translateY(20px)!important } .hero .slide.current .text { -webkit-transform: translateY(0)!important; -moz-transform: translateY(0)!important; transform: translateY(0)!important } .slideshow .arrow { width: 50%!important; height: 50px!important; top: auto!important; bottom: 0; margin-top: 0!important } .hero .text .paragraph { font-size: 100%!important } .form .column { margin-bottom: 0!important } .button { width: 100% } .img-responsive { max-width: 100%!important } .embed, .embed embed { max-width: 100%!important }
}
html { height: 100%
}
body { height: 100%; background: #fff
}
form { height: 100%
}
.accelerate { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden
}
.image,
.images { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #252525; overflow: hidden; display: block
}
.row { margin-top: 20px; margin-bottom: 20px
}
.row.nomargin { margin: 0
}
.row.top { margin-top: 0
}
header { position: fixed; width: 100%; z-index: 4; background: #fff; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .15); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .15); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); -webkit-transition: opacity 1000ms; -moz-transition: opacity 1000ms; transition: opacity 1000ms
}
header.active { opacity: .95; filter: alpha(opacity=95)
}
header .bounds { height: 120px
}
a.logo { position: absolute; left: 10px; top: 20%; height: 60%; -webkit-transition-property: height, top, margin-top; -webkit-transition-duration: 300ms; -moz-transition-property: height, top, margin-top; -moz-transition-duration: 300ms; transition-property: height, top, margin-top; transition-duration: 300ms
}
.logo.active { top: 50%; height: 51px; margin-top: -18px
}
.logo img.logo-main { position: absolute; top: 0; height: 75%; width: auto
}
.logo img.logo-chemical { position: absolute; z-index: -1; left: 0; top: 56%; height: 75%; -webkit-transition-property: height, left, top; -webkit-transition-duration: 300ms; -moz-transition-property: height, left, top; -moz-transition-duration: 300ms; transition-property: height, left, top; transition-duration: 300ms
}
.logo.active img.logo-chemical { left: 95px; top: -10%; height: 110%
}
input[type=text]::-ms-clear { display: none
}
.bg-gray { background-color: #f2f2f2; padding: 25px; margin-top: 30px
}
nav { position: absolute; z-index: 999; right: 10px; top: 50%; margin-top: -16px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 85%
}
nav ul { margin: 0; list-style: none
}
nav li,
nav a { display: block
}
nav a { line-height: normal; white-space: nowrap; font-weight: 700
}
header nav ul.main>li { position: relative; float: left; margin: 0
}
header nav ul.main>li>a { color: #666; font-size: 100%; padding: 10px 14px 8px; text-transform: uppercase; border-right: 1px solid #d0d0d0
}
header nav ul.main>li:hover>a { background-color: #656565; color: #fff
}
header nav ul.main .dropdown { display: block; position: absolute; visibility: hidden; opacity: 0; filter: alpha(opacity=0); background-color: #fff; -webkit-transition: opacity .1s, visibility 0; -webkit-transition-delay: 0, .1s; -moz-transition: opacity .1s, visibility 0; -moz-transition-delay: 0, .1s; transition: opacity .1s, visibility 0; transition-delay: 0, .1s; padding: 10px; left: 0; top: 100%; min-width: 100%; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .5); box-shadow: 0 2px 5px rgba(0, 0, 0, .5)
}
header nav ul.main .dropdown.has-image { padding: 10px 10px 10px 220px
}
header nav ul.main .dropdown.right { left: auto; right: 0
}
header nav .dropdown .image { display: block; position: absolute; left: 10px; top: 10px; bottom: 10px; height: auto; width: 200px; overflow: hidden
}
header nav ul.main ul li { position: relative
}
header nav ul.main li:hover .dropdown { visibility: visible; opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity .1s; -moz-transition: opacity .1s; transition: opacity .1s
}
header nav ul.main ul a { padding: 10px 18px; color: #303030
}
header nav ul.main ul li>a:hover { background-color: #f2f2f2; color: #303030
}
#search { position: static; padding: 0; margin-left: 10px
}
#share { padding: 0
}
#search>a,
#share>a { position: relative; display: block; padding: 0; width: 35px; height: 35px; overflow: hidden; text-indent: -9999em; border-right: none
}
#share>a { background-image: url(/cassette.axd/file/images/icon-nav-share-4727c904440f429d04be7771241f97d8abe2c585.png); background-position: left top; background-repeat: no-repeat
}
#share>a:hover { background-position: left bottom
}
header.search-active #search>a { background-color: #4566a2
}
#search a span { position: absolute; display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; -webkit-transition: opacity 100ms, -webkit-transform 100ms; -moz-transition: opacity 100ms, -moz-transform 100ms; transition: opacity 100ms, transform 100ms
}
#search .icon-dark { opacity: 1; filter: alpha(opacity=100); background-image: url(/cassette.axd/file/images/icon-search-dark-dacb4540280768289542548ba9f2a25fe021c918.png)
}
#search .icon-light { opacity: 0; filter: alpha(opacity=0); background-image: url(/cassette.axd/file/images/icon-search-light-113fc6130442a2c47423ae97680a323388fe1a9b.png); -webkit-transition: opacity 100ms, -webkit-transform 100ms; -webkit-transform: scale(1); -moz-transition: opacity 100ms, -moz-transform 100ms; -moz-transform: scale(1); transition: opacity 100ms, transform 100ms; transform: scale(1)
}
#search .icon-x { opacity: 0; filter: alpha(opacity=0); background-image: url(/cassette.axd/file/images/icon-x-light-4f60ae717973ddb2f6ff4bf62e19d6cef6d258a3.png); -webkit-transition: opacity 100ms, -webkit-transform 100ms; -webkit-transform: scale(0); -moz-transition: opacity 100ms, -moz-transform 100ms; -moz-transform: scale(0); transition: opacity 100ms, transform 100ms; transform: scale(0)
}
#search:hover>a .icon-dark,
header.search-active #search>a .icon-dark { opacity: 0; filter: alpha(opacity=0); display: none
}
#search:hover>a .icon-light { opacity: 1; filter: alpha(opacity=100); display: block
}
header.search-active #search>a .icon-light { opacity: 0; filter: alpha(opacity=0); display: none; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0)
}
header.search-active #search>a .icon-x { opacity: 1; filter: alpha(opacity=100); display: block; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1)
}
.search-field { visibility: hidden; position: absolute; opacity: 0; filter: alpha(opacity=0); left: 0; right: 0; top: 0; height: 35px; background: #e1e1e1; -webkit-transition: opacity 200ms, visibility; -webkit-transition-delay: 0, 200ms; -moz-transition: opacity 200ms, visibility; -moz-transition-delay: 0, 200ms; transition: opacity 200ms, visibility; transition-delay: 0, 200ms
}
header.search-active .search-field { visibility: visible; opacity: 1; filter: alpha(opacity=100); display: block; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; transition-delay: 200ms
}
#search input[type="text"],
#search label { position: absolute!important; left: 0; right: 35px; top: 0; background: transparent; border: none; padding: 8px 12px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-size: 120%
}
#search label { left: 1px; top: -2px; color: #666
}
#search input[type="submit"] { position: absolute; right: 0; top: 0; bottom: 0; width: 35px; background: #4566a2 url(/cassette.axd/file/images/icon-search-light-2x-aef9ba91690404b10cd9377789afd38a3081a82e.png) center no-repeat; background-size: 16px; border: none
}
.hero { min-width: 960px; position: relative; width: 100%; height: 275px; background-color: #202020; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none
}
.hero .bounds { display: block; height: 100%
}
.slideshow .arrow { cursor: pointer; position: absolute; z-index: 3; width: 70px; height: 70px; top: 50%; margin-top: -35px; background-color: #404040; background-position: center center; background-repeat: no-repeat; opacity: .8; filter: alpha(opacity=80); -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; transition: opacity 200ms
}
.slideshow .arrow:hover { opacity: .9; filter: alpha(opacity=90)
}
.slideshow .sPrev { left: 0; background-image: url(/cassette.axd/file/images/arrow-left-light-70676ea06cc1a39edc17a2911618084f5203ad7b.png)
}
.slideshow .sNext { right: 0; background-image: url(/cassette.axd/file/images/arrow-right-light-77e723e288f3f50726e4d25ae7333a7ad6ec2d9c.png)
}
.hero .slide .text { position: absolute; display: block; top: 50%; background: #666; padding: 35px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-20px); -webkit-transition-property: opacity, -webkit-transform; -webkit-transition-duration: 500ms; -moz-transform: translateX(-20px); -moz-transition-property: opacity, -moz-transform; -moz-transition-duration: 500ms; transform: translateX(-20px); transition-property: opacity, transform; transition-duration: 500ms
}
.hero .slide.current .text { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); opacity: 1; filter: alpha(opacity=100)
}
.slider-learn-more { font-size: 90%; text-transform: uppercase; color: #fff; margin-top: 12px; display: block
}
.slider-learn-more span { cursor: pointer
}
.slider-learn-more span:hover { color: #e1e1e1
}
.hero .slide.transitioning img { -webkit-animation-name: image-zoom; -webkit-animation-duration: 750ms; -webkit-animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -moz-animation-name: image-zoom; -moz-animation-duration: 750ms; -moz-animation-fill-mode: forwards; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease; animation-name: image-zoom; animation-duration: 750ms; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: ease
}
@-webkit-keyframes image-zoom { 0% { -webkit-transform: scale(1.02) } 100% { -webkit-transform: scale(1) }
}
@-moz-keyframes image-zoom { 0% { -moz-transform: scale(1.02) } 100% { -moz-transform: scale(1) }
}
@keyframes image-zoom { 0% { transform: scale(1.02) } 100% { transform: scale(1) }
}
.hero .text .heading { display: block; color: #aaa; font-size: 90%; padding-bottom: 15px; margin-bottom: 10px; border-bottom: 1px solid #aaa; text-transform: uppercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
}
.hero .text .paragraph { display: block; color: #fff; font-size: 150%; line-height: 1.5em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
}
.compact .text { padding: 25px
}
.compact .text .paragraph { font-size: 130%
}
.hero h2 { position: absolute; left: 10px; bottom: 15px; color: #fff
}
.scroller { cursor: pointer; display: block; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 70px; line-height: 70px; text-align: center; opacity: 0; filter: alpha(opacity=0); background: #fff; visibility: hidden; -webkit-transition-property: opacity, visibility; -webkit-transition-duration: 200ms; -moz-transition-property: opacity, visibility; -moz-transition-duration: 200ms; transition-property: opacity, visibility; transition-duration: 200ms; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none
}
.scroller.active { opacity: 1; filter: alpha(opacity=100); visibility: visible
}
.scroller img { margin-left: 4px
}
.breadcrumbs { position: relative; font-size: 90%; padding: 10px 0; overflow: hidden; min-height: 23px
}
.breadcrumbs ul { margin-top: 0; margin-bottom: 0; list-style: none
}
.breadcrumbs .bounds ul { margin-left: 0; padding-right: 160px
}
.breadcrumbs li { display: block; float: left; padding-right: 20px; margin-right: 10px; background: url(/cassette.axd/file/images/breadcrumb-arrow-137ac04a41ac94f62e7213d8c8a5c42d0f8688f7.png) right center no-repeat
}
.breadcrumbs li.back { padding-left: 20px; padding-right: 0; background: url(/cassette.axd/file/images/breadcrumb-arrow-left-3f49a22d4779e36552a0a19de00c3d01f04a9499.png) left center no-repeat
}
.breadcrumbs li.last { background: none
}
.breadcrumbs a { display: block
}
.breadcrumbs a.print,
.breadcrumbs a.share { position: absolute; right: 10px; border: 1px solid #b3b3b3; padding: 4px 8px; border-radius: 3px; color: #404040; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}
.breadcrumbs .page-tools { position: absolute; right: 10px
}
.breadcrumbs .page-tools a { display: inline-block; position: relative!important; right: auto!important
}
.breadcrumbs a.print:hover,
.breadcrumbs a.share:hover { background-color: rgba(255, 255, 255, .5); border-color: #999
}
.breadcrumbs a.print:before,
.breadcrumbs a.share:before { content: ""; display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; opacity: .3
}
.breadcrumbs a.print:before { background: url(/cassette.axd/file/images/icon-print-e04e4ef07c795ef9da958647977b4c9bf5cbacb8.png)
}
.breadcrumbs a.share:before { background: url(/cassette.axd/file/images/icon-share-8fc2d23fe4f32153e49dc83e0dbd55e9055e6b37.png)
}
.sidenav ul { margin: 20px 0 0; list-style: none; border-top-width: 1px; border-style: solid; border-color: #ddd
}
.sidenav li { display: block; font-size: 130%; border-bottom-width: 1px; border-style: inherit; border-color: inherit
}
.sidenav a { display: block; padding: 6px 0; -webkit-transition: -webkit-transform 200ms ease; -moz-transition: -moz-transform 200ms ease; transition: transform 200ms ease
}
.sidenav a:hover { -webkit-transform: translateX(6px); -moz-transform: translateX(6px); transform: translateX(6px)
}
.sidenav a.selectedtrue { color: #202020
}
.file-download,
.sidenav-link { position: relative; padding-left: 23px!important
}
a.file-download:before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 18px; background: url(/cassette.axd/file/images/icon-document-0372cde6085d9eabcd71cd77d89c6e4c0ac2e0d9.png)
}
a.icon-news:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -1px; background: url(/cassette.axd/file/images/icon-news-f2298c6d52d1fa36423b332447582cc675698220.png)
}
.content { min-width: 960px; position: relative; padding: 40px 0 80px
}
.content .column.span8 h2 { color: #24abdd
}
.bg-light-grey { background-color: #f2f2f2; border-color: #f2f2f2
}
.bg-blue { background-color: #0e0e0e; border-color: #0e0e0e; color: #f2f2f2
}
.content.sketches { background: url(/cassette.axd/file/images/sketch-top-left-cac4da711b026ec6abc0fc491849f09dd1a3ff01.png) top left no-repeat, url(/cassette.axd/file/images/sketch-top-right-1fea00c0f6f4b896d885d32d37924b93867fb6bc.png) top right no-repeat
}
h1.tab { opacity: 0; filter: alpha(opacity=0); width: 100%; height: 0; z-index: 2; top: -90px; margin: 0 auto; font-weight: 300; font-size: 160%; text-transform: uppercase; background: inherit; border-color: inherit; -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; transition: opacity 200ms
}
h1.tab.center { text-align: center
}
h1.tab.active { opacity: 1; filter: alpha(opacity=100)
}
h1.tab span { display: inline-block; position: relative; background: inherit; border-color: inherit; line-height: 75px; height: 50px; font-size: 140%; padding: 0 20px; margin-left: -20px
}
h1.tab.center span { margin-left: 0
}
h1.tab span:before,
h1.tab span:after { display: block; content: ""; position: absolute; z-index: -1; bottom: 0; border: 50px solid transparent; border-bottom-color: inherit; border-top-width: 0
}
h1.tab span:before { left: -50px
}
h1.tab span:after { right: -50px
}
.kickers { min-width: 920px; padding: 0 20px; overflow: hidden
}
.kicker { display: block
}
.kicker>.text { display: block; padding: 5px 0 15px
}
.kicker p { color: #303030
}
.kickers .column { padding: 0 20px; height: 100%
}
.kickers .image-wrapper { position: relative; display: block; height: 150px; line-height: 150px; font-size: 140%; margin-bottom: 15px
}
.image .overlay { display: block; position: absolute; opacity: 0; filter: alpha(opacity=0); z-index: 100; left: 0; top: 0; right: 0; bottom: 0; text-align: center; color: #fff; text-transform: uppercase; font-family: "museo-sans-condensed", sans-serif; background: rgba(20, 20, 20, .8); -webkit-transition: opacity 300ms ease; -moz-transition: opacity 300ms ease; transition: opacity 300ms ease
}
.ie8 .image .overlay { background: url(/cassette.axd/file/images/alpha-black80-8dfd8bbe39d16a69a1af2d973e44819d07847e2a.png) repeat
}a
.image .text { position: relative; -webkit-transition-property: padding-right; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: ease; -moz-transition-property: padding-right; -moz-transition-duration: 300ms; -moz-transition-timing-function: ease; transition-property: padding-right; transition-duration: 300ms; transition-timing-function: ease
}
.image .arrow { display: block; position: absolute; opacity: 0; filter: alpha(opacity=0); right: 0; top: 0; height: 100%; width: 12px; background: url(/cassette.axd/file/images/kicker-arrow-f8808763f45ec0b51515a162e376753854d5deec.png) center center no-repeat; -webkit-transition-property: opacity; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: ease; -moz-transition-property: opacity; -moz-transition-duration: 300ms; -moz-transition-timing-function: ease; transition-property: opacity; transition-duration: 300ms; transition-timing-function: ease
}
.image .play { background: url(/cassette.axd/file/images/play-arrow-538a9f64a73d8b33aa6f8946298571efd718ec15.png) center center no-repeat
}
.zoom:hover .image .text { padding-right: 24px; -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; transition-delay: 400ms
}
.zoom:hover .image .arrow { opacity: 0.5; filter: alpha(opacity=100); -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; transition-delay: 400ms
}
.zoom .image img { -webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease; transition: transform 400ms ease
}
.zoom:hover .image img { -webkit-transition-duration: 6s; -webkit-transform: scale(1.1); -moz-transition-duration: 6s; -moz-transform: scale(1.1); transition-duration: 6s; transform: scale(1.1)
}
.zoom:hover .image .overlay { opacity: 1; filter: alpha(opacity=100)
}
a.item { display: block; opacity: .6; height: 235px; overflow: hidden; background: #fff; color: #303030; margin: 20px 0; outline: 2px solid rgba(0, 0, 0, .3); -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .25); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .25); box-shadow: 0 2px 6px rgba(0, 0, 0, .25)
}
a.item.active { opacity: 1; filter: alpha(opacity=100); outline: 2px solid rgba(0, 0, 0, 0)
}
a.item:hover { background: #f6f6f6
}
a.item .column { position: relative; width: 50%; padding: 0; height: 100%
}
a.item .image { position: absolute; left: 0; right: 0; top: 0; bottom: 0; line-height: 235px; font-size: 180%
}
a.item .column>.text { width: 385px; padding: 0 30px 0 40px; margin: 45px auto 0; background: url(/cassette.axd/file/images/hex-red-e93d9680540c7a03d478e9abea5c3e7eebdf4bb6.png) left top no-repeat
}
a.item .column>.text p { font-family: "museo-sans-condensed", sans-serif; font-size: 165%; line-height: 1.4em
}
a.arrow,
.post span.arrow { position: relative; display: inline-block; background: #234086; color: #fff; padding: 8px 30px 8px 8px; font-weight: 700
}
a.arrow:hover,
.post span.arrow:hover { background-color: #1c4fb3
}
a.view-case-studies { position: relative; background: #234086; padding: 20px 35px 20px 50px; font-size: 130%; color: #fff; font-family: "museo-sans-condensed", sans-serif; margin-top: 30px; background-image: url(/cassette.axd/file/images/icon-case-study-9931bf6db65297fd3f8c7c190f3080c3ef4bdd5b.png); background-position: 20px center; background-repeat: no-repeat; -webkit-transform: none!important; -moz-transform: none!important; transform: none!important; -webkit-transition: background-color 200ms; -moz-transition: background-color 200ms; transition: background-color 200ms
}
a.view-case-studies:after,
a.arrow:after,
.post span.arrow:after { content: ""; display: block; position: absolute; right: 15px; top: 50%; width: 8px; height: 16px; margin-top: -8px; background: url(/cassette.axd/file/images/kicker-arrow-f8808763f45ec0b51515a162e376753854d5deec.png)
}
a.view-case-studies:hover { background-color: #2b4ea3
}
.playButton { display: block; position: absolute; z-index: 1; opacity: .9; left: 50%; top: 50%; width: 63px; height: 63px; margin: -31px 0 0 -31px; background: url(/cassette.axd/file/images/icon-play-d9f6fef714ee14b78cb471ca2a4cafcfd47e144d.png) 0 0 no-repeat; -webkit-transition: .2s opacity cubic-bezier(.51, .01, .37, .98); -moz-transition: .2s opacity cubic-bezier(.51, .01, .37, .98); -ms-transition: .2s opacity cubic-bezier(.51, .01, .37, .98); -o-transition: .2s opacity cubic-bezier(.51, .01, .37, .98); transition: .2s opacity cubic-bezier(.51, .01, .37, .98)
}
a:hover .playButton { opacity: 1
}
.products-table h3 { background-color: #ccc; margin-bottom: 0; padding: 10px
}
.bg-blue .products-table h3 { background-color: #036
}
.products-table ul { margin: 0 0 30px; list-style: none; border: 1px solid #ccc; border-bottom-width: 0; background: #fff
}
.bg-blue .products-table ul { border-color: #162a5d; border-width: 5px; border-bottom-width: 5px; border-top-width: 0; background: #d9dce3
}
.products-table li { position: relative; border-bottom: 1px solid #ccc
}
.products-table .image-wrapper { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; overflow: hidden
}
.products-table a { position: relative; display: block; line-height: 1.4em; padding: 0 10px; overflow: hidden
}
.products-table.has-photos a { padding: 0 10px 0 120px; min-height: 120px
}
.products-table .description { color: #333
}
.products-table a:hover { background: #f2f2f2
}
.content .column .products-table .column { display: block; padding-top: 8px; padding-bottom: 8px
}
.tip { position: fixed; z-index: 999; font-size: 125%; padding: 10px 15px; background: #4466a3; color: #fff
}
.tip::before { content: ""; display: block; position: absolute; left: 50%; margin-left: -5px; bottom: 100%; border: 10px solid transparent; border-top-width: 0; border-bottom-color: #4466a3
}
a.sidenav-button { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; cursor: pointer; position: relative; padding: 12px 15px!important; font-size: 100%; display: block; color: #fff; background: #183f8d; margin-bottom: 12px; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px
}
.sidenav-button img { float: right; width: 27px; height: 27px; margin-top: -5px; -webkit-transition: -webkit-transform 200ms ease; -moz-transition: -moz-transform 200ms ease; transition: transform 200ms ease
}
.sidenav-button:hover img { -webkit-transform: translateX(4px); -moz-transform: translateX(4px); transform: translateX(4px)
}
.sidenav-small { position: relative; padding: 45px 25px 25px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px
}
a+.sidenav-small,
.sidenav-small+.sidenav-small { margin-top: 50px
}
.sidenav-small:before { content: "Learn More"; position: absolute; left: 20px; top: -33px; height: 60px; background: url(/cassette.axd/file/images/icon-info-926e18af18c32517b0051259811537f8a67f20e4.png); background-repeat: no-repeat; color: #234086; padding: 10px 0 0 70px; font-weight: bold; font-size: 18px
}
.sidenav-small.people-mark:before { background-image: url(/cassette.axd/file/images/icon-people-b3468c27aee2593ed16f79a6beee5a9456f696ff.png); content: ""; width: auto
}
.sidenav-small p { margin-top: 0; font-size: 14px; margin-bottom: 15px
}
.sidenav-small h4 { margin-top: 1.5em; text-transform: uppercase; font-size: 15px
}
.sidenav-small h4:first-child { margin-top: 0
}
.sidenav-small ul { margin: 0; border-top-width: 0
}
.sidenav-small li { font-size: 100%; border-bottom-width: 0
}
.sidenav-small a { padding: 5px 0; line-height: 1.2
}
.sidenav-small.bg-blue a { color: #fff
}
.sidenav-small.bg-blue h4 { opacity: .4; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .5)
}
.sidenav-small a.kicker,
.sidenav-small a.sidenav-button { -webkit-transform: none; -moz-transform: none; transform: none
}
.sidenav-small a.kicker .image-wrapper { height: 120px; line-height: 120px; margin-bottom: 6px
}
.bg-blue a.file-download:before { background: url(/cassette.axd/file/images/icon-document-white-92097ab729a6da86312cf43621a1706b6b5ae765.png)
}
.bg-blue a.sidenav-link:before { content: ""; position: absolute; left: 0; top: 5px; width: 17px; height: 18px; background: url(/cassette.axd/file/images/icon-arrow-right-f0229fc34d054b873df5288f46a02143f8c13fae.png)
}
.button { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; cursor: pointer; position: relative; padding: 12px 20px; font-size: 120%; display: block; color: #fff; text-decoration: none; background-color: #4566a2; background-position: 8px center; background-repeat: no-repeat; border: none; -webkit-backface-visibility: hidden; -webkit-appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box
}
.popup-button-wrapper { padding: 10px 0; text-align: center
}
.button.download { display: inline-block; padding: 15px 35px
}
.button.download:hover { color: #fff
}
.button:hover { background-color: #3b5992
}
.button.icon { padding-left: 34px
}
.icon.email { background: url(/images/icon-mail.png) 0 center no-repeat; padding: 4px 0 4px 20px; line-height: 12px; margin-right: 7px
}
.icon.phone { background: url(/images/icon-phone.png) 0 center no-repeat; padding: 4px 0 4px 20px; line-height: 12px
}
.input-wrapper { position: relative; background: #fff; margin-bottom: 20px
}
.input-wrapper label { line-height: normal; left: 12px; top: 10px; color: #999; overflow: hidden; height: 20px; padding-right: 10px
}
.input-wrapper.textarea label { left: 11px
}
.input-wrapper input[type="text"],
.input-wrapper input[type="password"],
.input-wrapper textarea { width: 100%; max-width: 100%; padding: 9px 10px; border: 1px solid #999; background: transparent; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased
}
textarea { min-height: 150px
}
.validator { position: absolute; z-index: 2; right: 0; top: 0; width: 36px; height: 100%; background: #912028 url(/cassette.axd/file/images/icon-validation-e7f7f98dc0abb0cde3511571523066ee5aef9fba.png) center no-repeat
}
.ss-wrapper { background: #fff url(/cassette.axd/file/images/select-arrow-5359cc09b80248267189200dbc06af5287d329c4.png) right center no-repeat; padding: 11px 10px 10px; border: 1px solid #999; -webkit-transition: background 200ms; -moz-transition: background 200ms; transition: background 200ms
}
.ss-wrapper.focus { background-color: #eee
}
#backToTop { display: block; visibility: hidden; opacity: 0; position: fixed; z-index: 100; background: #90918f; right: 0; bottom: 10%; width: 43px; height: 39px; -webkit-border-radius: 20px 0 0 20px; -moz-border-radius: 20px 0 0 20px; -ms-border-radius: 20px 0 0 20px; -o-border-radius: 20px 0 0 20px; border-radius: 20px 0 0 20px; -webkit-transition: opacity 200ms linear, visibility 1ms linear 200ms; -moz-transition: opacity 200ms linear, visibility 1ms linear 200ms; -o-transition: opacity 200ms linear, visibility 1ms linear 200ms; transition: opacity 200ms linear, visibility 1ms linear 200ms
}
#backToTop .arrow { position: absolute; background: #a9aaa9 url(/cassette.axd/file/images/arrow-up-a88641dbf3f4329beecc70cb29764e8fe10a8350.png) center no-repeat; top: 4px; right: 8px; bottom: 4px; left: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: .2s color linear, .2s background-color linear, .2s border-color linear, .2s opacity linear; -moz-transition: .2s color linear, .2s background-color linear, .2s border-color linear, .2s opacity linear; -ms-transition: .2s color linear, .2s background-color linear, .2s border-color linear, .2s opacity linear; -o-transition: .2s color linear, .2s background-color linear, .2s border-color linear, .2s opacity linear; transition: .2s color linear, .2s background-color linear, .2s border-color linear, .2s opacity linear
}
#backToTop:hover .arrow { background-color: #c3c3c3
}
#backToTop.show { opacity: 1; visibility: visible; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -o-transition: opacity 200ms linear; transition: opacity 200ms linear
}
.list-item a { line-height: 1.3em
}
footer { background: #656565; padding: 30px 0 40px; color: #b3b3b3
}
footer p { font-size: 80%; color: #e1e1e1
}
.tweetWrapper { background-color: #707070; padding: 10px 0
}
.tweetWrapper { color: #fff!important; line-height: 40px; padding-left: 20px; font-size: 90%
}
.tweetWrapper a { color: #fff!important; font-weight: bold; text-decoration: underline
}
footer h5 { color: #fff; text-shadow: 1px -1px 0 rgba(0, 0, 0, .1)
}
footer a:hover { color: #fff
}
footer a { color: #e1e1e1; font-size: 90%
}
footer a:hover { color: #fff
}
footer ul { margin: 0; list-style: none; font-size: 90%; line-height: 1.3em
}
footer li { margin: .5em 0
}
footer ul.social { line-height: 29px
}
footer ul.social li { margin: 1em 0
}
footer ul.social a { display: block; height: 29px; padding-left: 36px; background-position: left top; background-repeat: no-repeat; opacity: .8; filter: alpha(opacity=80)
}
footer ul.social a:hover { opacity: 1; filter: alpha(opacity=100)
}
footer ul.social a.twitter { background-image: url(/cassette.axd/file/images/icon-twitter-interestinger-01b60387744548db5eb485176be4f1c87e70e90f.png)
}
footer ul.social a.linkedin { background-image: url(/cassette.axd/file/images/icon-linkedin-interestinger-c760f78662f63d8ecfcd02133b6208aeafd54b19.png)
}
footer ul.social a.youtube { background-image: url(/cassette.axd/file/images/icon-youtube-interestinger-275dc1ecf4a0b8ab4f0ea2d75f442c0923b3e992.png)
}
footer ul.social a.Gplus { background-image: url(/cassette.axd/file/images/google_plus-a8ed219664d2038d409c6937457322e4037164be.png)
}
footer .signature { font-size: 90%; padding-top: 30px; border-top: 1px solid #606060; box-shadow: 0 -1px 0 rgba(255, 255, 255, .1)
}
footer .app-store-logo { width: 120px; margin-top: 2px; margin-bottom: 5px
}
.video-container { width: auto; height: auto
}
.bounds { position: relative; max-width: 1140px; min-width: 960px; margin-left: auto; margin-right: auto
}
.bounds.padding { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box
}
.column { position: relative; float: left; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box
}
.reverse>.column { float: right
}
.span1 { width: 8.333333%
}
.span11 .span1 { width: 9.090909%
}
.span10 .span1 { width: 10%
}
.span9 .span1 { width: 11.111111%
}
.span8 .span1 { width: 12.5%
}
.span7 .span1 { width: 14.285714%
}
.span2,
.span6 .span1 { width: 16.666666%
}
.span11 .span2 { width: 18.181818%
}
.span5 .span1,
.span10 .span2 { width: 20%
}
.span9 .span2 { width: 22.222222%
}
.span3,
.span4 .span1,
.span8 .span2 { width: 25%
}
.span11 .span3 { width: 27.272727%
}
.span7 .span2 { width: 28.571428%
}
.span10 .span3 { width: 30%
}
.span4,
.span3 .span1,
.span6 .span2,
.span9 .span3 { width: 33.333333%
}
.span11 .span4 { width: 36.363636%
}
.span8 .span3 { width: 37.5%
}
.span5 .span2,
.span10 .span4 { width: 40%
}
.span5 { width: 41.666666%
}
.span7 .span3 { width: 42.857142%
}
.span9 .span4 { width: 44.444444%
}
.span11 .span5 { width: 45.454545%
}
.span6,
.span2 .span1,
.span4 .span2,
.span6 .span3,
.span8 .span4,
.span10 .span5 { width: 50%
}
.span11 .span6 { width: 54.545454%
}
.span9 .span5 { width: 55.555555%
}
.span7 .span4 { width: 57.142857%
}
.span7 { width: 58.333333%
}
.span5 .span3,
.span10 .span6 { width: 60%
}
.span8 .span5 { width: 62.5%
}
.span11 .span7 { width: 63.636363%
}
.span8,
.span3 .span2,
.span6 .span4,
.span9 .span6 { width: 66.666666%
}
.span10 .span7 { width: 70%
}
.span7 .span5 { width: 71.428571%
}
.span11 .span8 { width: 72.727272%
}
.span9,
.span4 .span3,
.span8 .span6 { width: 75%
}
.span9 .span7 { width: 77.777777%
}
.span5 .span4,
.span10 .span8 { width: 80%
}
.span11 .span9 { width: 81.818181%
}
.span10,
.span6 .span5 { width: 83.333333%
}
.span7 .span6 { width: 85.714285%
}
.span8 .span7 { width: 87.5%
}
.span9 .span8 { width: 88.888888%
}
.span10 .span9 { width: 90%
}
.span11 .span10 { width: 90.90909%
}
.span11 { width: 91.666666%
}
.span12 { width: 100%
}
.column .column:first-child { padding-left: 0
}
.column .column:last-child { padding-right: 0
}
.gap1 { margin: 0 0 0 8.333333%
}
.gap2 { margin: 0 0 0 16.666666%
}
.gap3 { margin: 0 0 0 25%
}
.gap4 { margin: 0 0 0 33.333333%
}
.gap5 { margin: 0 0 0 41.666666%
}
.gap6 { margin: 0 0 0 50%
}
.gap7 { margin: 0 0 0 58.333333%
}
.gap8 { margin: 0 0 0 66.666666%
}
.gap9 { margin: 0 0 0 75%
}
.gap10 { margin: 0 0 0 83.333333%
}
.gap11 { margin: 0 0 0 91.666666%
}
.gap12 { margin: 0 0 0 100%
}
.reverse .gap1 { margin: 0 8.333333% 0 0
}
.reverse .gap2 { margin: 0 16.666666% 0 0
}
.reverse .gap3 { margin: 0 25% 0 0
}
.reverse .gap4 { margin: 0 33.333333% 0 0
}
.reverse .gap5 { margin: 0 41.666666% 0 0
}
.reverse .gap6 { margin: 0 50% 0 0
}
.reverse .gap7 { margin: 0 58.333333% 0 0
}
.reverse .gap8 { margin: 0 66.666666% 0 0
}
.reverse .gap9 { margin: 0 75% 0 0
}
.reverse .gap10 { margin: 0 83.333333% 0 0
}
.reverse .gap11 { margin: 0 91.666666% 0 0
}
.reverse .gap12 { margin: 0 100% 0 0
}
.loading-popup { position: fixed; z-index: 9999; left: 50%; top: 50%; width: 56px; height: 56px; margin-top: -28px; margin-left: -28px; background: #000 url(/cassette.axd/file/images/loading-d57771cfbda232bf2e32ccacbae3330e5ed8ff5f.gif) center center no-repeat; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; opacity: .8
}
.input-table { margin: 0
}
.input-table input { margin-right: 10px
}
.input-table label { vertical-align: middle
}
p.small { font-size: 11px
}
.aspNetDisabled { visibility: hidden
}
@media print { * { background: none; color: #303030 } body { background: none; padding: 30px } .web-address { position: absolute; right: 0; top: 20px; font-size: 220%; color: #999 } .page-header .info { max-height: 100%; overflow: hidden } .cs-container-fullwidth, .cs-container-fullwidth-alt { background-image: none!important } .blue-callout { display: none } .bread-crumbs { display: none } .toggle { display: none!important } .no-print, .breadcrumbs, .sPrev, .sNext, .share, .languages, .back { display: none } .bg-blue .products-table ul { border: none!important } .post-image { position: relative; overflow: hidden; background-color: rgba(0, 0, 0, .2); width: 100% } .post-image img { width: 100% } .date { position: absolute; top: 0; left: 0; color: #fff; background-color: #00abd4; width: 60px; padding: 15px; font-weight: bold; text-align: center } .date .month { text-transform: uppercase } .date .day { font-size: 180%; opacity: .6 } .post { display: block } .posts-wrapper { width: 100% }
}
/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top
}
.fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020
}
.fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px
}
.fancybox-opened { z-index: 8030
}
.fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, .5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, .5); box-shadow: 0 10px 25px rgba(0, 0, 0, .5)
}
.fancybox-outer,
.fancybox-inner { position: relative
}
.fancybox-inner { overflow: hidden
}
.fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch
}
.fancybox-error { color: #444; font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 15px; white-space: nowrap
}
.fancybox-image,
.fancybox-iframe { display: block; width: 100%; height: 100%
}
.fancybox-image { max-width: 100%; max-height: 100%
}
#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span { background-image: url('/cassette.axd/file/fancybox/fancybox_sprite-17df19f97628e77be09c352bf27425faea248251.png')
}
#fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: .8; cursor: pointer; z-index: 8060
}
#fancybox-loading div { width: 44px; height: 44px; background: url('/cassette.axd/file/fancybox/fancybox_loading-48673ea547f521de42a1a2057df6939cafda7ae5.gif') center center no-repeat
}
.fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040
}
.fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('/cassette.axd/file/fancybox/blank-2daeaa8b5f19f0bc209d976c02bd6acb51b00b0a.gif'); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 8040
}
.fancybox-prev { left: 0
}
.fancybox-next { right: 0
}
.fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden
}
.fancybox-prev span { left: 10px; background-position: 0 -36px
}
.fancybox-next span { right: 10px; background-position: 0 -72px
}
.fancybox-nav:hover span { visibility: visible
}
.fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible!important
}
.fancybox-lock { overflow: hidden
}
.fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('/cassette.axd/file/fancybox/fancybox_overlay-b3a4ee645ba494f52840ef8412015ba0f465dbe0.png')
}
.fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0
}
.fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll
}
.fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; text-shadow: none; z-index: 8050
}
.fancybox-opened .fancybox-title { visibility: visible
}
.fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center
}
.fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; background: rgba(0, 0, 0, .8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #fff; font-weight: bold; line-height: 24px; white-space: nowrap
}
.fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff
}
.fancybox-title-inside-wrap { padding-top: 10px
}
.fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8)
}
Rows with image hover effect - Script Codes
Rows with image hover effect - Script Codes
Home Page Home
Developer Amit Verma
Username amit-webdesigner
Uploaded January 18, 2023
Rating 3
Size 12,875 Kb
Views 8,096
Do you need developer help for Rows with image hover effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Amit Verma (amit-webdesigner) Script Codes
Name
Bootstrap Number Spinner
Gradients
Diagonal Slide
Bootstrap Custom MegaMenu Navbar with Sidenav taggle social accordion full page responsive fade carousel and customblcok quotes
Pricing table hover effect
Simple Vertical Tab
Thumbnail Bootstrap Carousel With Hover Captions
Mobile menu icon animations
Hover Effect on Images From Different Directions Using Pure CSS
Metro style dynamic Tiles
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!