{"id":60,"date":"2014-02-05T15:27:10","date_gmt":"2014-02-05T15:27:10","guid":{"rendered":"http:\/\/www.dessol.com\/blog\/?p=60"},"modified":"2014-02-05T15:51:38","modified_gmt":"2014-02-05T15:51:38","slug":"pure-css-image-hover","status":"publish","type":"post","link":"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/","title":{"rendered":"A pure CSS image hover"},"content":{"rendered":"

The traditional method to creating a great image hover was to use Javascript. Now, thanks to CSS3, it is just not necessary to do so. Reduce your page load times by just initiating this CSS.<\/p>\n

 
\nSimple and Effective CSS
\n <\/p>\n

\r\n#mainwrapper {  \r\n  font: 10pt normal Arial, sans-serif;  \r\n  height: auto;  \r\n  margin: 30px auto 0 auto;\r\n  text-align: center;  \r\n  width: 660px;  \r\n}  \r\n\r\n#mainwrapper .box {\r\n    border: 5px solid #fff;\r\n    cursor: pointer;\r\n    height: 172px;\r\n    float: left;\r\n    margin-bottom: 20px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    width: 300px;\r\n    -webkit-box-shadow: 1px 1px 1px 1px #ccc;\r\n    -moz-box-shadow: 1px 1px 1px 1px #ccc;\r\n    box-shadow: 1px 1px 1px 1px #ccc;\r\n}\r\n\r\n#mainwrapper .box img {\r\n    position: absolute;\r\n    left: 0;\r\n    -webkit-transition: all 300ms ease-out;\r\n    -moz-transition: all 300ms ease-out;\r\n    -o-transition: all 300ms ease-out;\r\n    -ms-transition: all 300ms ease-out;\r\n    transition: all 300ms ease-out;\r\n\twidth: auto;\r\n\theight: 100%;\r\n}\r\n\r\n#mainwrapper .box .caption {\r\n    background-color: rgba(0,0,0,0.8);\r\n    position: absolute;\r\n    color: #fff;\r\n    z-index: 100;\r\n    -webkit-transition: all 300ms ease-out;\r\n    -moz-transition: all 300ms ease-out;\r\n    -o-transition: all 300ms ease-out;\r\n    -ms-transition: all 300ms ease-out;\r\n    transition: all 300ms ease-out;\r\n    left: 0;\r\n}\r\n#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {\r\n    opacity: 0;\r\n    width: 288px;\r\n    height: 162px;\r\n    text-align: left;\r\n    padding: 15px;\r\n}\r\n\r\n#mainwrapper .box:hover .fade-caption {  \r\n    opacity: 1;  \r\n}\r\n<\/code><\/pre>\n
And this how it looks..<\/p>\n
\n
\"\"<\/p>\n
Landscape Photography<\/h3>\n
<\/span><\/div>\n<\/div>\n
The image is a pick from Wallpaperology.com<\/a><\/p>\n
 
\nSource: ExtremeCSS Blogspot<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
The traditional method to creating a great image hover was to use Javascript. Now, thanks to CSS3, it is just not necessary to do so. Reduce your page load times by just initiating this CSS.   Simple and Effective CSS   #mainwrapper { font: 10pt normal Arial, sans-serif; height: auto; margin: 30px auto 0 auto;…<\/p>\n
Read more »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":49,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,11],"tags":[],"class_list":["post-60","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-snippets","category-css"],"yoast_head":"\nA pure CSS image hover - Web Design & Development Lowestoft Blog| Dessol<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A pure CSS image hover - Web Design & Development Lowestoft Blog| Dessol\" \/>\n<meta property=\"og:description\" content=\"The traditional method to creating a great image hover was to use Javascript. Now, thanks to CSS3, it is just not necessary to do so. Reduce your page load times by just initiating this CSS.   Simple and Effective CSS   #mainwrapper { font: 10pt normal Arial, sans-serif; height: auto; margin: 30px auto 0 auto;...Read more »\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Design & Development Lowestoft Blog| Dessol\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-05T15:27:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-02-05T15:51:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"780\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"dessol\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"dessol\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/\",\"url\":\"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/\",\"name\":\"A pure CSS image hover - Web Design & Development Lowestoft Blog| Dessol\",\"isPartOf\":{\"@id\":\"https:\/\/www.dessol.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg\",\"datePublished\":\"2014-02-05T15:27:10+00:00\",\"dateModified\":\"2014-02-05T15:51:38+00:00\",\"author\":{\"@id\":\"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/bb13ecb8e4b05dee2d7ec34d4a2af362\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/#primaryimage\",\"url\":\"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg\",\"contentUrl\":\"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg\",\"width\":780,\"height\":300,\"caption\":\"CSS Code Snippet\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dessol.com\/blog\/#website\",\"url\":\"https:\/\/www.dessol.com\/blog\/\",\"name\":\"Web Design & Development Lowestoft Blog| Dessol\",\"description\":\"Work, news and murmerings\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dessol.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/bb13ecb8e4b05dee2d7ec34d4a2af362\",\"name\":\"dessol\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/36a894164074bc1f6a20492e1d14ddc1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/36a894164074bc1f6a20492e1d14ddc1?s=96&d=mm&r=g\",\"caption\":\"dessol\"},\"url\":\"https:\/\/www.dessol.com\/blog\/author\/dessol\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A pure CSS image hover - Web Design & Development Lowestoft Blog| Dessol","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/","og_locale":"en_GB","og_type":"article","og_title":"A pure CSS image hover - Web Design & Development Lowestoft Blog| Dessol","og_description":"The traditional method to creating a great image hover was to use Javascript. Now, thanks to CSS3, it is just not necessary to do so. Reduce your page load times by just initiating this CSS.   Simple and Effective CSS   #mainwrapper { font: 10pt normal Arial, sans-serif; height: auto; margin: 30px auto 0 auto;...Read more »","og_url":"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/","og_site_name":"Web Design & Development Lowestoft Blog| Dessol","article_published_time":"2014-02-05T15:27:10+00:00","article_modified_time":"2014-02-05T15:51:38+00:00","og_image":[{"width":780,"height":300,"url":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","type":"image\/jpeg"}],"author":"dessol","twitter_misc":{"Written by":"dessol","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/","url":"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/","name":"A pure CSS image hover - Web Design & Development Lowestoft Blog| Dessol","isPartOf":{"@id":"https:\/\/www.dessol.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/#primaryimage"},"image":{"@id":"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","datePublished":"2014-02-05T15:27:10+00:00","dateModified":"2014-02-05T15:51:38+00:00","author":{"@id":"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/bb13ecb8e4b05dee2d7ec34d4a2af362"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.dessol.com\/blog\/pure-css-image-hover\/#primaryimage","url":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","contentUrl":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","width":780,"height":300,"caption":"CSS Code Snippet"},{"@type":"WebSite","@id":"https:\/\/www.dessol.com\/blog\/#website","url":"https:\/\/www.dessol.com\/blog\/","name":"Web Design & Development Lowestoft Blog| Dessol","description":"Work, news and murmerings","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dessol.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/bb13ecb8e4b05dee2d7ec34d4a2af362","name":"dessol","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/36a894164074bc1f6a20492e1d14ddc1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/36a894164074bc1f6a20492e1d14ddc1?s=96&d=mm&r=g","caption":"dessol"},"url":"https:\/\/www.dessol.com\/blog\/author\/dessol\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":16,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/posts\/60\/revisions\/62"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/media\/49"}],"wp:attachment":[{"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}