prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[enh] on hover gallery image, darken everything

Browse Source
This commit is contained in:
Laurent Peuch 2015-12-04 13:25:56 +01:00
parent c1320d0152
commit 54c1a53735
2 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
materialize/css/style.css
View File

@ -36,6 +36,10 @@ body {
height: 100%; height: 100%;
} }
.gallery-square > a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-cover { .gallery-cover {
position: absolute; position: absolute;
top: 0px; top: 0px;

12
templates/example.html
View File

@ -20,42 +20,46 @@
<div class="galleries-grid"> <div class="galleries-grid">
<div class="galleries-line"> <div class="galleries-line">
<div class="gallery-square"> <div class="gallery-square">
<a href="#"></a> <a href="#">
<div class="gallery-title"> <div class="gallery-title">
<h2>First Gallery Title</h2> <h2>First Gallery Title</h2>
<h3>Sub gallery title</h3> <h3>Sub gallery title</h3>
<div class="gallery-datetime">3 march 2015</div> <div class="gallery-datetime">3 march 2015</div>
</div> </div>
</a>
<div class="gallery-cover" style="background-image: url('./1.png');"></div> <div class="gallery-cover" style="background-image: url('./1.png');"></div>
</div> </div>
<div class="gallery-square"> <div class="gallery-square">
<a href="#"></a> <a href="#">
<div class="gallery-title"> <div class="gallery-title">
<h2>Second Gallery Title</h2> <h2>Second Gallery Title</h2>
<h3>Sub gallery title</h3> <h3>Sub gallery title</h3>
<div class="gallery-datetime">3 march 2015</div> <div class="gallery-datetime">3 march 2015</div>
</div> </div>
</a>
<div class="gallery-cover" style="background-image: url('./1.png');"></div> <div class="gallery-cover" style="background-image: url('./1.png');"></div>
</div> </div>
</div> </div>
<div class="galleries-line"> <div class="galleries-line">
<div class="gallery-square"> <div class="gallery-square">
<a href="#"></a> <a href="#">
<div class="gallery-title"> <div class="gallery-title">
<h2>First Gallery Title</h2> <h2>First Gallery Title</h2>
<h3>Sub gallery title</h3> <h3>Sub gallery title</h3>
<div class="gallery-datetime">3 march 2015</div> <div class="gallery-datetime">3 march 2015</div>
</div> </div>
</a>
<div class="gallery-cover" style="background-image: url('./1.png');"></div> <div class="gallery-cover" style="background-image: url('./1.png');"></div>
</div> </div>
<div class="gallery-square"> <div class="gallery-square">
<a href="#"></a> <a href="#">
<div class="gallery-title"> <div class="gallery-title">
<h2>Second Gallery Title</h2> <h2>Second Gallery Title</h2>
<h3>Sub gallery title</h3> <h3>Sub gallery title</h3>
<div class="gallery-datetime">3 march 2015</div> <div class="gallery-datetime">3 march 2015</div>
</div> </div>
</a>
<div class="gallery-cover" style="background-image: url('./1.png');"></div> <div class="gallery-cover" style="background-image: url('./1.png');"></div>
</div> </div>
</div> </div>