数日の私のイメージのロールオーバー効果を実装した前にウェブサイトの私が働いています。 ポートフォリオのウェブサイトのほとんどの画像のロールオーバー効果を使用しています。 このチュートリアルではどのようにシンプルなCSS画像のロールオーバー効果を作成する方法を学びます。 私は1つのシンプルなグラフィックを使用しています。 単純なHTMLコードを他の基本的なCSSのスタイリング。

この角丸のborderプロパティ、IEで。 デモの表示はサポートされていません

お客様のご感想教えて？ 場合は、他のチュートリアルは、私たちと共有したいと思うがご連絡までお気軽に知っているコメントにドロップします。

例：

ステップ＃1 CSSの構造

最初に我々は単純なCSSコードを作成する

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } *（パディング：0;マージン：0;）本文（フォント：100％、 通常のゴシック体、ヘルベチカ、 サンセリフ ;） 
  width : 280px ; height : 150px ; background-image : url ( land .jpg ) ; background-position : top ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border : 10px solid #ccc ; font : 13px normal Arial, Helvetica, sans-serif ; line-height : 18px ; float :left ; margin : 0 10px 10px 0 ; } 。rollover_img（ 幅 ：280px; 高さ ：150px; 背景画像 ：（ 土地 のURL は、。jpg）; 背景位置 ： トップ ;は- moz - border - radiusで：10px; - WebKitの- border - radiusで：10px;ボーダー：10px 固体 ＃cccの ;フォント：13px、 通常のゴシック体、ヘルベチカ、 サンセリフ ;行の高さ：18px;フロート：左 ;マージン：0 10px 10px 0;） 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } 。（ 色 ：＃333; 幅 ：280px rollover_img; 高さ ：150px; 表示 ： ブロック ; テキスト装飾 ： なし ;） 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } 。rollover_img：（ 背景 ：＃000;不透明ホバー ：60;フィルター：アルファ （不透明度= 60）;） 
 display : none ; width : 280px ; padding : 5px ; } 。スパンrollover_img（ 表示 ： なし ; 幅 ：280px;パディング：5px;） 
  span { display : block ; } 。：hoverをスパンrollover_img（ 表示 ： ブロック ;） 

ステップ＃2 HTMLの構造

今のところ、単純なHTMLコードを作成する

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div クラス = "rollover_img""<a タイトル = "http://blog.aceinfowayindia.com""<SPAN>を Loremイプサムかなしみamet、consecteturのadipiscing elit座る= "Ace Infoway India" のhref。  sedのcondimentum。  volutpatします。 前庭elit。  Aenean egetのenim履歴書の女神ビバンダムpellentesque。 推計の例テキスト、Loremイプサムかなしみではsedは、consectetur adipiscing elit amet座る。"/スパン""/""/部" 

デモを見る

Twitterのか、 開発者は楽園を購読する上で我々に従っ+ RSSフィードはウェブ上で最良のウェブ開発のチュートリアルです。

報告Filed under：CSSの 、管理者によるチュートリアル