Create Dropdown Hover Effects Using CSS

Many developers choose to use JavaScript or jQuery to create simple dropdown hover effects, but the same effect can be achieved in a much more lightweight way by using CSS.

 dropdown2

If you want an HTML element to appear when another element is hovered upon, your HTML might look something like this:

<div class="dropdown">
		<p class="drop">Hover Me</p>
		<div class="hover">
			<p>Dropdown Item</p>
		</div>
	</div>
 

The .hover div is what you’re going to want to appear when the .dropdown div is hovered upon, so it shouldn’t be visible when the page first loads. That can be achieved with the following CSS:


.hover{

display: none;

}

To make the .hover div appear when .dropdown is hovered upon, you will also need this line of CSS:


.dropdown:hover .hover{

display: block;

}

That’s all you need to create a simple dropdown hover effect. It can be used to create navigation menus, photo captions that appear upon hover, to enlarge thumbnails upon hover, and more. Experiment with transitions and styling to really make the code your own!

Create Columns Easily with CSS3’s Column-Count

CSS3’s column-count property makes it easy for you to turn your content into columns with only one line of CSS and no extra HTML markup. Let’s say you have a div made up of a few paragraphs, like this: If you want to spread that content out across three adjacent columns, you can do it […]

Read on...

CSS3 Embossed Text Effect

CSS3’s text-shadow property can be used to achieve so many cool text effects, including an embossed effect. This effect is created by giving the text-shadow property  values of -1 for the horizontal and vertical shadow, and leaving the blur-radius at its default of 0. Then horizontal and vertical shadow values of positive 1 are layered on […]

Read on...

CSS Shorthand Properties

Condense your CSS code by writing in CSS shorthand! A few CSS properties allow for one single property to replace many properties. For example, if you want to give an element a different amount of padding on each side, it could look like this: But why write excess code if you don’t have to? These four […]

Read on...

CSS List Styles

HTML unordered lists are characterized by <li> elements within a <ul> tag. The default styling of these unordered lists indicates that each individual list item is to follow a round bullet symbol, but the list-style-type property does take other values. Setting the list-style-type value to circle, for example, will cause the default bullet styling to be […]

Read on...

The Universal Reset

CSS resets are used to override the default stylesheets that modern browsers use. Because each browser uses a different stylesheet, certain elements (submit buttons, links, etc) don’t always have consistent styling across all browsers. A CSS reset will wipe out some of the browser’s default styling by replacing it with a set of completely customizable style rules […]

Read on...

12 Responsive CSS grid systems

A grid system provides designers with a structure to present their work in a much more manageable and readable way. The grid systems helps in attaining a level of consistency in designs throughout a site. Here are 12 responsive CSS grid systems that help to make sites more more responsive, beautiful and organized. 1. Motherplate […]

Read on...

10 Awesome CSS tools for designers

It is essential for developers to use design tools to increase their knowledge and get projects completed faster. Here are 10 tools which will be of great help to CSS designers. Using these tools can minimize the effort and time that a developer must put into designing a web page. 1. Stylizr This CSS tool […]

Read on...

How To Alter Images Using CSS Filters

CSS filters allow you to do some funky stuff to HTML elements using only CSS. A fun way to take advantage of this cool tool is to use it to put filters on your images, much like the ones you would add to your images on photo editing applications like Photoshop or Instagram. CSS filter isn’t supported […]

Read on...

Quick Tip: How to Use CSS3 to Create a Fade Effect

With CSS3’s webkit transition property and opacity properties, it’s easy to duplicate the effects of JavaScript and jQuery with CSS. Insert this code into the body of your html: This css code will make the entire #fade div fade out to nothing when it’s hovered upon: By defining the parameters of the -webkit-transition property to opacity 1s […]

Read on...