带图像叠加的合理响应式图库

时间：2015-05-22 10:42:07

标签： html css image gallery

我一直在努力实现一周的成就，但进展甚微，如果可以的话，我总是试着在没有帮助的情况下学习所有东西，但是我会来找你这方面的帮助。

我对HTML和CSS有一个很好的理解，但是下面的一些CSS对我来说是非常新的。特别是用于创建合理画廊的方法。

这就是我想要实现的目标 - http://thesaxman.com/#gallery

我正在尝试复制它，以便我可以在之后修改它，所以我使用了检查工具来获取HTML和CSS。

我设法创建了这个 - https://jsfiddle.net/807LLbL3/

HTML 

<section id="gallery" class="bh" style="height: 611px;">


<div id="mygallery" class="justified-gallery" style="height: 2398.01027268233px;">

    <div class="single_image" style="width: 321px; height: 256.384663430338px; top: 0px; left: 0px; opacity: 1;">
        <img src="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery-12.jpg" style="width: 321px; height: 257px;  margin-left: -160.5px; margin-top: -128.5px;">
        <div class="image_overlay text-center">
            <div class="wrapper">
                <div class="view-bigger">
                    <a class="single_image" href="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery-12.jpg" rel="gallery">Grow Icon</a>
                </div>
                <div class="download">
                    <a href="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery-12.jpg">Download ICON</a>
                </div>
                <div class="content">
                    <a target="_blank" href="https://twitter.com/share?url=http://www.dangoodofficial.co.uk/&amp;text=Check out @DanGoodeMusic"><span>Tweet Me</span>@DanGoodeMusic</a>
                </div>
            </div>
        </div>
  </div>

        <div class="single_image" style="width: 385px; height: 256.384663430338px; top: 0px; left: 321px; opacity: 1;">
        <img src="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery1.jpg" style="width: 385px; height: 257px; margin-left: -192.5px; margin-top: -128.5px;">
        <div class="image_overlay text-center">
            <div class="wrapper">
                <div class="view-bigger">
                    <a class="single_image" href="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery1.jpg" rel="gallery">View Bigger</a>
                </div>
                <div class="download">
                    <a href="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery1.jpg">Download</a>
                </div>
                <div class="content">
                    <a target="_blank" href="https://twitter.com/share?url=http://www.thesaxman.com/&amp;text=Check out @TheSaxManUK"><span>Click to Tweet</span>“Check out @TheSaxManUK”</a>
                </div>
            </div>
        </div>
  </div>

        <div class="single_image" style="width: 353px; height: 234.912043507791px; top: 256.384663430338px; left: 0px; opacity: 1;">
        <img src="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery-9.jpg" style="width: 353px; height: 235px; margin-left: -176.5px; margin-top: -117.5px;">
        <div class="image_overlay text-center">
            <div class="wrapper">
                <div class="view-bigger">
                    <a class="single_image" href="http://thesaxman.com/wp-content/themes/thesaxman/library/img/gallery/image19.jpg" rel="gallery">View Bigger</a>
                </div>
                <div class="download">
                    <a href="http://thesaxman.com/wp-content/themes/thesaxman/library/img/gallery/image19.jpg">Download</a>
                </div>
                <div class="content">
                    <a target="_blank" href="https://twitter.com/share?url=http://www.thesaxman.com/&amp;text=Check out @TheSaxManUK"><span>Click to Tweet</span>“Check out @TheSaxManUK”</a>
                </div>
            </div>
        </div>
  </div>
        <div class="single_image" style="width: 353px; height: 234.912043507791px; top: 256.384663430338px; left: 353px; opacity: 1;">
        <img src="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery-7.jpg" style="width: 353px; height: 235px; margin-left: -176.5px; margin-top: -117.5px;">
        <div class="image_overlay text-center">
            <div class="wrapper">
                <div class="view-bigger">
                    <a class="single_image" href="http://thesaxman.com/wp-content/themes/thesaxman/library/img/gallery/image20.jpg" rel="gallery">View Bigger</a>
                </div>
                <div class="download">
                    <a href="http://thesaxman.com/wp-content/themes/thesaxman/library/img/gallery/image20.jpg">Download</a>
                </div>
                <div class="content">
                    <a target="_blank" href="https://twitter.com/share?url=http://www.thesaxman.com/&amp;text=Check out @TheSaxManUK"><span>Click to Tweet</span>“Check out @TheSaxManUK”</a>
                </div>
            </div>
        </div>
  </div>




</div>

    </section>

CSS 

.gallery img {
    display: block;
    position: relative;
    float: left;
    overflow: hidden;

}

.gallery img:hover {
    opacity: 0.8;
}

section#gallery {
 background-color:rgba(0,0,0,1.00)
}

section#gallery div .image_overlay {
-webkit-transition: all 0.3s ease-in-out;-
moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;t
ransition: all 0.3s ease-in-out;
background-color: rgba(1, 62, 187,0.8); 
opacity:0; position:absolute; 
top:10px; 
left:10px;
right:10px; 
bottom:10px; 
z-index:100; 
display:block; 
border:1px solid rgba(255,255,255,1.00)}
section#gallery div:hover>.image_overlay {
 opacity:1;
}

section#gallery div .image_overlay .wrapper {
display: table;
width: 100%;
height: 100%;
position:relative;
}

section#gallery div .image_overlay .wrapper .content {
display: table-cell;
text-align: center;
vertical-align: middle;
color:rgba(255,255,255,1.00);font-size:12px;}
section#gallery div .image_overlay .wrapper .content a { color:rgba(255,255,255,1.00)
}

section#gallery div .image_overlay .wrapper .view-bigger { 
position:absolute; 
top:10px; 
right:10px; 
color:rgba(255,255,255,1.00); 
}

section#gallery div .image_overlay .wrapper .view-bigger a {
color:rgba(255,255,255,1.00) !important
}

section#gallery div .image_overlay .wrapper .view-bigger a:after {
content:"\f504";
display:inline-block;
-webkit-font-smoothing:antialiased;
font:normal 20px/1 'dashicons';
vertical-align:top;
margin-left:5px;
}

section#gallery div .image_overlay .wrapper .download { 
position:absolute; 
bottom:10px; 
left:10px; 
color:rgba(255,255,255,1.00); 
}

section#gallery div .image_overlay .wrapper .download a {
color:rgba(255,255,255,1.00) !important
}

section#gallery div .image_overlay .wrapper .download a:after {
content: "\f316";
display: inline-block;
-webkit-font-smoothing: 
antialiased;font: normal 20px/1 'dashicons';
vertical-align: top;    
margin-left:5px;
}
section#gallery div .image_overlay .wrapper .content span { 
display:block; 
font-size:20px; 
font-family: "museo";}



.image_overlay {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: rgba(1, 62, 187,0.8);
  opacity: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 100;
  display: block;
  border: 1px solid rgba(255,255,255,1.00);
}
.image_overlay .wrapper {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
}
.image_overlay .wrapper .view-bigger {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgba(255,255,255,1.00);
}
.image_overlay .wrapper .download {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: rgba(255,255,255,1.00);
}
.image_overlay .wrapper .content {
  font-family: Righteous;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: rgba(255,255,255,1.00);
  font-size: 22px;
}
.image_overlay .wrapper .content a {
  color: rgba(255,255,255,1.00);
}
.image_overlay .wrapper .content span {
  display: block;
  font-size: 20px;
  font-family: "museo";
}

@-webkit-keyframes justified-gallery-show-caption-animation {
    from {
        opacity: 0
    }

    to {
        opacity: .7
    }
}

@-moz-keyframes justified-gallery-show-caption-animation {
    from {
        opacity: 0
    }

    to {
        opacity: .7
    }
}

@-o-keyframes justified-gallery-show-caption-animation {
    from {
        opacity: 0
    }

    to {
        opacity: .7
    }
}

@keyframes justified-gallery-show-caption-animation {
    from {
        opacity: 0
    }

    to {
        opacity: .7
    }
}

@-webkit-keyframes justified-gallery-show-entry-animation {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-moz-keyframes justified-gallery-show-entry-animation {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-o-keyframes justified-gallery-show-entry-animation {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes justified-gallery-show-entry-animation {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.justified-gallery {
    width: 100%;
    position: relative;
    overflow: hidden
}

.justified-gallery>a, .justified-gallery>div {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    opacity: 0;
    filter: alpha(opacity=0)
}

.justified-gallery>a>img, .justified-gallery>div>img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    border: 0
}
</style>

我遇到的主要问题是：

  1. 如何才能使此响应？

  2. 如何让它跨越页面的整个宽度？我想创建3行4个图像，跨越页面的整个宽度。每行彼此略微不一致 - 就像例子一样。

  3. 在JSFiddle中我包含的图像都是自动调整的 我是否需要重新调整我想要使用的所有图像的大小，以便他们使用此方法更有效地工作？这会避免图像被扭曲（就像我的JSFiddle中的第一个图像，这有点扭曲）

  4. 我还缺少其他任何工作吗？

    5. 谢谢，

    丹

0 个答案:

没有答案
相关问题
最新问题