http://kyleschaeffer.com/user-experience/pure-css-image-hover/ > HTML,CSS,레이아웃

본문 바로가기

검색취소

http://kyleschaeffer.com/user-experience/pure-css-image-hover/

검색 이전 다음 목록

본문

Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect.

The Image

The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. When using CSS to achieve this effect, the static image and the hover image are actually contained within the same image file. Basically, we’re displaying the image and cropping it so that only one image state is displayed at one time. In order to do this, we’ll omit the <img> tag and display the image as a the background-image of an <a/> (anchor) tag instead.

Let’s look at an image that could be used as a CSS hover image.

Hover image

Simplistic Markup

As you can see, both static and hover images are contained within the same file. In order to display only half of the image at one time, we’ll apply it as a background color to an HTML block element. Here is the HTML for this example:

<a class="myButtonLink" href="#LinkURL">Leaf</a>

The CSS

As you can see, the HTML is extremely simple. We’re doing everything in CSS, so this is where the real magic happens:

.myButtonLink {
	display: block;
	width: 100px;
	height: 100px;
	background: url('/path/to/myImage.png') bottom;
	text-indent: -99999px;
}
.myButtonLink:hover {
	background-position: 0 0;
}

We’re using the CSS psuedo-element hover to apply the mouseover image effect. When your mouse pointer moves over the “myButtonLink” element, our CSS slides the background image (using the background-position property) appropriately, giving us our mouseover image. This is simple, fast, and efficient! You’ll use less files and space on your server, clients will have to download less data, and older computers will render your content much faster.

The Result

Move your mouse over the image to see the hover in action.

Leaf

And there you have it, a pure CSS approach to image hovers. You can apply this method to links, <div/> tags, and just about anything else you can imagine in your site’s design. Happy styling!

추천 0

등록된 댓글이 없습니다.

검색취소

HTML,CSS,레이아웃

검색
  • no image
  • CSS : 반응형 웹(Responsive Web)

     CSS : 반응형 웹(Responsive Web)Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많…

  • no image
  • CSS 글 자간 줄간 설정방법

    CSS 글 자간 줄간 설정방법 글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가…

  • #5cf039 헥스 색상 코드
  • #5cf039 헥스 색상 코드

    첨부파일

    #5cf039 정보 반전#a30fc625% 포화도#52ff2a그레이스케일#949494 25% 밝게#94f57e원본#5cf03925% 어둡게#34cf0f lawngreen#7cfc0025% 포화도 저하#6ad94f웹 …

  • CSS 레이아웃... Copy & Paste
  • CSS 레이아웃... Copy & Paste

    첨부파일

    오랜만에 그냥 팁 하나! CSS 레이아웃이 익숙치 않은 나 같은 분을 위한 친절한 사이트.. Copy & Paste를 해도 걱정 없다.Dynamic Drive CSS Layouts via Ajaxian 덤으로 왼쪽 …

  • XHTML+CSS 레이아웃 디자인 예제
  • XHTML CSS 레이아웃 디자인 예제

    첨부파일

    XHTML과 CSS로 레이아웃 디자인을 할 때 많이 쓰이는 레이아웃 디자인 템플릿을 모아둔 싸이트가 있다.http://www.intensivstation.ch/en/templates/일반적으로 사용되는 웬만한 레이아…

  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기
  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기

    *예전에 작성했던 강좌의 마지막 부분입니다. CSS를 통해 이전 강좌에서 작성한 마크업에 모양새를 입히기 전에 한 번 복습 하는 의미로 참고하면 좋겠네요 float 속성이번 시간에는 css를 통해 레이아우팅을 할 때…

?>