私はrocketthemeによるJoomlaテーマを使用しており、テンプレートのdemo-styles.lessファイルでそのテーマのクラスを見つけて再現することができました.
そこで、自分の Web サイト用に demo-styles-custom.less を作成し、次のコードを追加しました。
// Demo Image
.al-image {
position: relative;
}
.al-image img {
max-width: 100%;
height: auto;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
}
.al-image object {
max-width: 100%;
height: auto;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
}
// MainBottom Images
.al-image-description {
color: #fff;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index:1000;
.transition(opacity 0.5s ease-out);
span {
margin-top: 25px;
margin-left: 15px;
line-height: 0.5em;
}
h4 {
padding: 0 15px;
margin-top: 15px;
margin-bottom: 8px;
font-family: 'SourceSansProExtraLight',Helvetica,Arial,sans-serif;
font-size: 2.8em;
font-weight: normal;
line-height: 1.1em;
}
p {
padding: 0 15px;
font-size: 1.5em;
}
a.readon {
margin-left: 15px;
span {
margin-left: 0;
}
}
}
.al-image:hover .al-image-description {
background-color: rgba(1, 197, 255, 0.3); //#01C5FF
// color: #FFFFFF;
bottom: 0;
opacity: 1 !important;
}
これにより、ホバーすると al-image-desciption の内容が表示され、クリック可能な「続きを読む」ボタンが表示される非常に優れたタイルが作成されます。一番下の a.readon は、私が使用している joomla テンプレートのスタイル ファイルで定義されているので、心配する必要はありません。
とにかく、それはimgでうまく機能しますが、テキストを追加したい場合はうまく機能しません. オブジェクト パラメータを (al-image object{} で) 追加すると、テキストが作成されますが、説明をホバリングすると、使用している小さなテキストしかカバーされません。画像が占めていた正方形の領域全体ではありません。背景画像を追加して、その画像の上にテキストを配置できると思いましたが、背景画像は画像と同じように反応しません。それらはテキストのサイズに制限されています。結果は非常に醜く、下の添付画像で確認できます。
テキストに画像と同じスペースを使用させる方法はありますか? 他のすべての画像タイルと同じように機能させたいのですが、テキストを書き込むことができます。
（画像を投稿するには10人の担当者が必要なようですので、それらへのリンクのみを投稿します）
画像 1 修正したいタイルにカーソルを合わせると、その隣に通常の画像で問題なく動作するタイルが表示されます
動作するタイルの 1 つにカーソルを合わせたときの画像 2 (無地の画像) で、説明を表示し、修正したいタイルにカーソルを合わせていない
画像から、動作していないタイルの背景画像が圧縮されていることがわかります。モジュールでタイルを作成するために使用した HTML コードは次のとおりです。
<div class="al-image">
<object id="image-with-text" style="background-image: url('/images/Stores/CoverSQ.jpg');">hello all</object>
<div class="al-image-description">
<span class="icon-shopping-cart rt-big-icon"></span>
<h4>Store</br>Renovation</h4>
<p>fast delivery times</p>
<a class="readon" href="index.php/en/activities/store-renovation"><span>Read More</span></a>
</div>
</div>
残りのタイルでは、そこで使用されるコードは次のとおりです。
<div class="al-image">
<img src="/images/Office_Renovations/CoverSQ.jpg" alt="Office Renovation" />
<div class="al-image-description">
<span class="icon-group rt-big-icon"></span>
<h4>Office</br>Renovation</h4>
<p>Uninterruptable deploy®</p>
<a class="readon" href="index.php/en/activities/office-renovation"><span>Read More</span></a>
</div>
</div>
うまく説明できれば幸いです。私が得ることができる助けをいただければ幸いです。ありがとうございました。