CSS PortalCSS Portal
Menu
  • CSS Generators
  • CSS Resources
  • CSS Tools
  • HTML Resources
  • Blog
  1. Home
  2. Blog
  3. Image Hover Fade In Effect

Image Hover Fade In Effect

Published on October 18, 2015By Rene Spronk

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.

The HTML

Lets first take a look at the html that will be used to display the team member and their information.

<div class="team-fade">
  <div class="team-img"><img alt="Team Member" src="15.jpg"></div>
  <div class="team-box">
    <div class="team-content">
      <h3>John Doe</h3>
      <hr />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum sem vel odio consequat molestie. Duis et ex bibendum.</p>
      <hr />
      <div class="social-icons">
        <a href="#" target="_blank" rel="noopener noreferrer"><img alt="Facebook" src="facebook.png"></a>
        <a href="#" target="_blank" rel="noopener noreferrer"><img alt="Twitter" src="twitter.png"></a>
        <a href="#" target="_blank" rel="noopener noreferrer"><img alt="Google+" src="google.png"></a>
        <a href="#" target="_blank" rel="noopener noreferrer"><img alt="Pinterest" src="pinterest.png"></a>
      </div>
    </div>
  </div>
</div>

As can be seen, the code is broken into a number of div’s to display the required information, such as:
team-fade – The container that will be used to display all required information.
team-img – Here you will display an image of the team member.
team-content – Information about our team member will be displayed here, such as: name, bio, telephone number etc.
social-icons – Links to the team members social media accounts.

The CSS

Now comes the most important part…the css code, if we didn’t have this, our project would look terrible.
We’ll break the css code into sections to make it a bit easier to read.

.team-fade {
  width: 250px;
  height: 250px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  overflow: hidden; 
  display: block; 
  position: relative;
}
.team-fade .team-box {
  top: 0px; left: 0px; right: 0px; bottom: 0px; 
  color: #f2f2f2;
}
.team-fade .team-img {
  z-index: 0;
}
.team-fade .team-box {
  z-index: 1; 
  opacity: 0; 
  background-color: rgba(0, 0, 0, 0.6);
}
.team-fade:hover .team-box {
  opacity: 1;
}

The above code will display our main container (team-fade) and set the required width and height.

.team-box {
  width: 100%; 
  height: 100%; 
  transition:0.4s ease-in-out;
  display: block;
  transform: scale(1); 
  backface-visibility: hidden;
}
.team-img img {
  display: block; 
  position: relative; 
  max-height: 100%; 
  max-width: 100%;
}
.team-img {
  position: relative;
}
.team-box {
  top: 0px; left: 0px; 
  position: absolute;
}
.team-box .team-content {
  padding: 5px; 
  top: 50%; left: 50%; 
  float: left; 
  display: block; 
  position: relative; 
  transform: translateX(-50%) translateY(-50%);
}
.team-content {
  text-align: center;
}
.team-content p {
  font-size: 14px;
}

This above code is where we will set the styles for the image and information that will be displayed for the team member.

.team-content .social-icons a {
  padding: 5px;
  display: inline-block;
}
.team-content .social-icons img {
  width: 24px; height: 24px;
}
hr {
  border: 0; 
  height: 0;
  width: 80%;
  border-bottom: 1px solid #f2f2f2;
}

The above code is where we will style our social media icons and also style our hr tag.

.round-team, .round-team .team-img, .round-team .team-box, .round-team .team-content, .round-team img {
  border-radius: 50%;
  overflow: hidden;
}

If you would like to display the container rounded instead of square, just add the above class – round-team

That’s it for this tutorial, to check out an working example of the above, please click on the button below.

Demo


Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL
Sidebar

CSS & HTML References

  • CSS At-Rules
    • @charset
    • @document
    • @font-face
    • @import
    • @keyframes
    • @media
    • @namespace
    • @page
    • @supports
    • @viewport
  • CSS Data Types
    • angle
    • basic-shape
    • blend-mode
    • color
    • frequency
    • gradient
    • image
    • integer
    • length
    • number
    • percentage
    • position
    • ratio
    • resolution
    • string
    • time
    • url
  • CSS Functions
    • attr
    • blur
    • brightness
    • calc
    • circle
    • contrast
    • drop-shadow
    • ellipse
    • grayscale
    • hsl
    • hsla
    • hue-rotate
    • inset
    • invert
    • linear-gradient
    • matrix
    • matrix3d
    • opacity
    • perspective
    • polygon
    • radial-gradient
    • repeating-linear-gradient
    • repeating-radial-gradient
    • rgb
    • rgba
    • rotate
    • rotate3d
    • rotateX
    • rotateY
    • rotateZ
    • saturate
    • scale
    • scale3d
    • scaleX
    • scaleY
    • scaleZ
    • sepia
    • skew
    • skewX
    • skewY
    • translate
    • translate3d
    • translateX
    • translateY
    • translateZ
  • CSS Properties
    • align-content
    • align-items
    • align-self
    • all
    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-fill-mode
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • backface-visibility
    • background
    • background-attachment
    • background-blend-mode
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-image-outset
    • border-image-repeat
    • border-image-slice
    • border-image-source
    • border-image-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-decoration-break
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • caret-color
    • clear
    • clip-path
    • color
    • column-count
    • column-fill
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • counter-set
    • cursor
    • direction
    • display
    • empty-cells
    • filter
    • flex
    • flex-basis
    • flex-direction
    • flex-flow
    • flex-grow
    • flex-shrink
    • flex-wrap
    • float
    • font
    • font-family
    • font-feature-settings
    • font-kerning
    • font-language-override
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-synthesis
    • font-variant
    • font-variant-alternates
    • font-variant-caps
    • font-variant-east-asian
    • font-variant-ligatures
    • font-variant-numeric
    • font-variant-position
    • font-weight
    • grid
    • grid-area
    • grid-auto-columns
    • grid-auto-flow
    • grid-auto-rows
    • grid-column
    • grid-column-end
    • grid-column-gap
    • grid-column-start
    • grid-gap
    • grid-row
    • grid-row-end
    • grid-row-gap
    • grid-row-start
    • grid-template
    • grid-template-areas
    • grid-template-columns
    • grid-template-rows
    • hanging-punctuation
    • height
    • hyphens
    • image-orientation
    • justify-content
    • justify-items
    • justify-self
    • left
    • letter-spacing
    • line-break
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • max-height
    • max-width
    • min-height
    • min-width
    • mix-blend-mode
    • object-fit
    • object-position
    • opacity
    • order
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-wrap
    • overflow-x
    • overflow-y
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • perspective
    • perspective-origin
    • place-content
    • place-items
    • place-self
    • position
    • quotes
    • resize
    • right
    • shape-image-threshold
    • shape-margin
    • shape-outside
    • tab-size
    • table-layout
    • text-align
    • text-align-last
    • text-combine-upright
    • text-decoration
    • text-decoration-color
    • text-decoration-line
    • text-decoration-style
    • text-emphasis
    • text-emphasis-color
    • text-emphasis-position
    • text-emphasis-style
    • text-indent
    • text-justify
    • text-orientation
    • text-overflow
    • text-shadow
    • text-transform
    • text-underline-position
    • top
    • transform
    • transform-origin
    • transform-style
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • vertical-align
    • visibility
    • white-space
    • widows
    • width
    • word-break
    • word-spacing
    • word-wrap
    • writing-mode
    • z-index
  • CSS Pseudo Classes
    • :active
    • :checked
    • :default
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :fullscreen
    • :hover
    • :in-range
    • :indeterminate
    • :invalid
    • :lang
    • :last-child
    • :last-of-type
    • :link
    • :not
    • :nth-child
    • :nth-last-child
    • :nth-last-of-type
    • :nth-of-type
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :root
    • :target
    • :valid
    • :visited
  • CSS Pseudo Elements
    • ::after
    • ::before
    • ::first-letter
    • ::first-line
    • ::placeholder
    • ::selection
  • HTML Tags
    • a
    • abbr
    • address
    • area
    • article
    • aside
    • audio
    • b
    • base
    • bdi
    • bdo
    • blockquote
    • body
    • br
    • button
    • canvas
    • caption
    • cite
    • code
    • col
    • colgroup
    • comment
    • datalist
    • dd
    • del
    • details
    • dfn
    • dialog
    • div
    • dl
    • doctype
    • dt
    • em
    • embed
    • fieldset
    • figcaption
    • figure
    • footer
    • form
    • h1
    • h2
    • h3
    • h4
    • h5
    • h6
    • head
    • header
    • hr
    • html
    • i
    • iframe
    • img
    • input
    • ins
    • kbd
    • keygen
    • label
    • legend
    • li
    • link
    • map
    • mark
    • menu
    • meta
    • meter
    • nav
    • noscript
    • object
    • ol
    • optgroup
    • option
    • output
    • p
    • param
    • picture
    • pre
    • progress
    • q
    • rp
    • rt
    • ruby
    • s
    • samp
    • script
    • section
    • select
    • small
    • source
    • span
    • strong
    • style
    • sub
    • summary
    • sup
    • table
    • tbody
    • td
    • textarea
    • tfoot
    • th
    • thead
    • time
    • title
    • tr
    • track
    • u
    • ul
    • var
    • video
    • wbr
  • Sponsors
  • Learn Wordpress
    Wordpress hosting. Theme and plugin reviews. Wordpress development tips.
    Templatic
    Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips.
    A2 Web Hosting
    Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting.
    Online Password Manager
    Access your passwords from any computer, no need to remember all of your passwords.
    Advertise Here
    Advertise your company and products here!

    About CSSPortal

    CSS Portal is home to many examples of CSS and how it can be used in website design. Here you'll find all CSS properties and many CSS generators to help with all your design needs.

    Friends

    • Expand URL
    • Password Manager
    • Website Tools & Generators

    CSSPortal

    • Donate to CSSPortal
    • Privacy Policy
    • Contact Us
    • CSS Blog

    Copyright © 2022, CSSPortal.com All rights reserved.