style the photo album page of the vier theme

diff --git a/view/templates/photo_album.tpl b/view/templates/photo_album.tpl
index 5416066cf084040de2c83e2e8d84f9d310449d67..d3e7ca4874a8b3481d7a6e2c4acf523e122b03c1 100644 (file)
--- a/view/templates/photo_album.tpl
+++ b/view/templates/photo_album.tpl
@@ -9,9 +9,9 @@
 {{/if}}
 
 {{foreach $photos as $photo}}
-<div class="photo-album-image-wrapper" id="photo-album-image-wrapper-{{$id}}">
-       <a href="{{$photo.link}}" class="photo-album-photo-link" id="photo-album-photo-link-{{$id}}" title="{{$photo.title}}">
-               <img src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.title}}" class="photo-album-photo lframe resize{{$twist}}" id="photo-album-photo-{{$id}}" />
+<div class="photo-album-image-wrapper" id="photo-album-image-wrapper-{{$photo.id}}">
+       <a href="{{$photo.link}}" class="photo-album-photo-link" id="photo-album-photo-link-{{$photo.id}}" title="{{$photo.title}}">
+               <img src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.title}}" class="photo-album-photo lframe resize{{$photo.twist}}" id="photo-album-photo-{{$photo.id}}" />
                <p class='caption'>{{$photo.desc}}</p>          
        </a>
 </div>

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index cbb850c130afadabf98f70ff17455936bc2abee1..8454c7e0ae610c46fb3987f825ace15afafc7ea7 100644 (file)
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -3024,7 +3024,8 @@ a.btn#contact-edit-actions-button {
 }
 
 /* photo album page */
-.photo-top-image-wrapper {
+.photo-top-image-wrapper,
+.photo-album-image-wrapper {
   position: relative;
   float: left;
   margin-top: 15px;
@@ -3054,11 +3055,33 @@ a.btn#contact-edit-actions-button {
   float: left;
   width: 175px;
 }
-img.photo-top-photo {
+img.photo-top-photo,
+img.photo-album-photo {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
+.photo-album-photo {
+  float: none;
+}
+.photo-album-image-wrapper .caption {
+  opacity: 0;
+  width: 100%;
+  position: absolute;
+  bottom: 0px;
+  padding: 3px 5px;
+  background-color: rgb(255, 255, 255);
+  margin: 0;
+  overflow: hidden;
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+}
+.photo-album-image-wrapper:hover .caption {
+  opacity: 1;
+}
 
 .menu-profile-list{
   height: auto;