SimplySilent on DeviantArthttps://www.deviantart.com/simplysilent/art/Embedded-Hover-CSS-Snippet-426324539SimplySilent

Deviation Actions

SimplySilent's avatar

Embedded Hover CSS Snippet

By
Published:
5K Views

Description

:points: Commission Me | Journal Skins | Gallery Skins | Create your own Journal Skins!

Stamp: Yes if Fav and Credit by SimplySilent Live Version


CSS Snippet created for TheGalleryOfEve, who wanted to know how to create thumbs similar to those used in features at devPREMIUM. I tried to make the format as simple as possible to use, but there's still a lot of HTML code that needs to be copy and pasted for each thumb.

Features

  • Uses embedded thumbs instead of :bigthumb: codes (see that version here)
  • Embedded Thumbs can expand or shrink well. To customize the max-width, edit the second line of the CSS: .feature{max-width:400px;}
  • Easy customization for the font and color of the Title and Artist section


How To Use

  1. Install this skin by clicking the "Install" button on the right hand side of this page.
  2. From Sta.sh, click the blue "Edit Skin" link and open up the CSS code.
  3. Copy everything in the main "Skin CSS" section.
  4. Paste this code at the bottom of the CSS of a Journal Skin and Save.
  5. Use the example HTML given in the "Header CSS" section of this skin to format the HTML for your feature.


More Code Snippets


Big Thumb Hover CSS Snippet by SimplySilent Simple and Clean Thumbs Snippet by SimplySilent Mini Thumb Gallery Code Snippet by SimplySilent 
© 2014 - 2024 SimplySilent
Comments16
Join the community to add your comment. Already a deviant? Log In
fuure01's avatar
Can you get the caption to do a slow fade-in somehow?