{"id":380,"date":"2015-10-18T04:37:57","date_gmt":"2015-10-18T04:37:57","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=380"},"modified":"2024-02-28T23:27:38","modified_gmt":"2024-02-28T23:27:38","slug":"image-hover-fade-in-effect","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/image-hover-fade-in-effect\/","title":{"rendered":"Image Hover Fade In Effect"},"content":{"rendered":"<p>In this tutorial I will show you a simple animation effect that will reveal information when you hover over an image. This information can be anything that you want, I have decided to show an example of a team member, when you hover over the image you will be able to see the persons name, short bio and links to their social media pages.<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-381\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2015\/10\/team-hover.png\" alt=\"\" width=\"150\" height=\"150\" \/><\/p>\n<h3>The HTML<\/h3>\n<p>Lets first take a look at the html that will be used to display the team member and their information.<\/p>\n<pre class=\"language-html\"><code><xmp><div class=\"team-fade\">\r\n  <div class=\"team-img\"><img decoding=\"async\" alt=\"Team Member\" src=\"15.jpg\"><\/div>\r\n  <div class=\"team-box\">\r\n    <div class=\"team-content\">\r\n      <h3>John Doe<\/h3>\r\n      <hr \/>\r\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum sem vel odio consequat molestie. Duis et ex bibendum.<\/p>\r\n      <hr \/>\r\n      <div class=\"social-icons\">\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" alt=\"Facebook\" src=\"facebook.png\"><\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" alt=\"Twitter\" src=\"twitter.png\"><\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" alt=\"Google+\" src=\"google.png\"><\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" alt=\"Pinterest\" src=\"pinterest.png\"><\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/xmp><\/code><\/pre>\n<p>As can be seen, the code is broken into a number of div&#8217;s to display the required information, such as:<br \/>\n<span class=\"code\">team-fade<\/span> &#8211; The container that will be used to display all required information.<br \/>\n<span class=\"code\">team-img<\/span> &#8211; Here you will display an image of the team member.<br \/>\n<span class=\"code\">team-content<\/span> &#8211; Information about our team member will be displayed here, such as: name, bio, telephone number etc.<br \/>\n<span class=\"code\">social-icons<\/span> &#8211; Links to the team members social media accounts.<\/p>\n<h3>The CSS<\/h3>\n<p>Now comes the most important part&#8230;the css code, if we didn&#8217;t have this, our project would look terrible.<br \/>\nWe&#8217;ll break the css code into sections to make it a bit easier to read.<\/p>\n<pre class=\"language-css\"><code>.team-fade {\r\n  width: 250px;\r\n  height: 250px;\r\n  border: 1px solid rgba(0, 0, 0, 0.5);\r\n  overflow: hidden; \r\n  display: block; \r\n  position: relative;\r\n}\r\n.team-fade .team-box {\r\n  top: 0px; left: 0px; right: 0px; bottom: 0px; \r\n  color: #f2f2f2;\r\n}\r\n.team-fade .team-img {\r\n  z-index: 0;\r\n}\r\n.team-fade .team-box {\r\n  z-index: 1; \r\n  opacity: 0; \r\n  background-color: rgba(0, 0, 0, 0.6);\r\n}\r\n.team-fade:hover .team-box {\r\n  opacity: 1;\r\n}\r\n<\/code><\/pre>\n<p>The above code will display our main container (team-fade) and set the required width and height.<\/p>\n<pre class=\"language-css\"><code>.team-box {\r\n  width: 100%; \r\n  height: 100%; \r\n  transition:0.4s ease-in-out;\r\n  display: block;\r\n  transform: scale(1); \r\n  backface-visibility: hidden;\r\n}\r\n.team-img img {\r\n  display: block; \r\n  position: relative; \r\n  max-height: 100%; \r\n  max-width: 100%;\r\n}\r\n.team-img {\r\n  position: relative;\r\n}\r\n.team-box {\r\n  top: 0px; left: 0px; \r\n  position: absolute;\r\n}\r\n.team-box .team-content {\r\n  padding: 5px; \r\n  top: 50%; left: 50%; \r\n  float: left; \r\n  display: block; \r\n  position: relative; \r\n  transform: translateX(-50%) translateY(-50%);\r\n}\r\n.team-content {\r\n  text-align: center;\r\n}\r\n.team-content p {\r\n  font-size: 14px;\r\n}\r\n<\/code><\/pre>\n<p>This above code is where we will set the styles for the image and information that will be displayed for the team member.<\/p>\n<pre class=\"language-css\"><code>.team-content .social-icons a {\r\n  padding: 5px;\r\n  display: inline-block;\r\n}\r\n.team-content .social-icons img {\r\n  width: 24px; height: 24px;\r\n}\r\nhr {\r\n  border: 0; \r\n  height: 0;\r\n  width: 80%;\r\n  border-bottom: 1px solid #f2f2f2;\r\n}<\/code><\/pre>\n<p>The above code is where we will style our social media icons and also style our hr tag.<\/p>\n<pre class=\"language-css\"><code>.round-team, .round-team .team-img, .round-team .team-box, .round-team .team-content, .round-team img {\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}<\/code><\/pre>\n<p>If you would like to display the container rounded instead of square, just add the above class &#8211; <span class=\"code\">round-team<\/span><\/p>\n<p>That&#8217;s it for this tutorial, to check out an working example of the above, please click on the button below.<\/p>\n<p><a class=\"btn btn-primary\" href=\"https:\/\/www.cssportal.com\/tryit\/index.php?file=blog\/image-hover-fade\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial I will show you a simple animation effect that will reveal information when you hover over an image. This information can be anything that you want, I have decided to show an example of a team member, when you hover over the image you will be able to see the persons name, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-380","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":7,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":569,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions\/569"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}