响应式网格上的缩略图覆盖大小问题
我在响应式投资组合网站上使用基础框架，在此处http://www.evanarussell.com/newsite
我正在实施此处显示的缩略图叠加样式http://lukashaider.com
我的第一次尝试（在我网站上的前两个缩略图中看到）涉及使用css淡入具有背景颜色的div内部的图像，但是当添加标题时我无法使其正常运行
在第三个缩略图上我添加了标题，但我无法弄清楚如何使叠加层适合图像的大小。它的每侧看起来大约15px。
我的目标是在缩略图3中看到标题，其中叠加层像前两个缩略图一样拟合图像。
这是HTML：
<div class="large-4 medium-4 small-6 columns">
<div class="imagebg"><a title="block 1" href="#">
<img src="http://placehold.it/350&text=." class="fade"></a></div>
</div>
<div class="large-4 medium-4 small-6 columns">
<div class="imagebg"><a title="block 2" href="#"><img src="http://placehold.it/350&text=." class="fade"></a></div>
</div>
<div class="large-4 medium-4 small-6 columns">
<a title="block 3" href="#">
<div class="thumbcaption"><span>TEST CAPTION</span></div>
<img src="http://placehold.it/350&text=.">
</a>
</div>
CSS：
.fade {
opacity: 1;
transition: opacity .18s ease-in-out;
-moz-transition: opacity .18s ease-in-out;
-webkit-transition: opacity .18s ease-in-out;
}
.fade:hover {
opacity: 0.24;
}
.imagebg {
background-color: rgba(245, 64, 77, 0.75);
background-color: rgba(245, 64, 77, 0.25);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 64, 77, 0.25)), color-stop(100%, #f5404d));
background-image: -webkit-linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
background-image: linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
}
.thumbcaption {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
opacity: 0;
background-color: rgba(245, 64, 77, 0.75);
background-color: rgba(245, 64, 77, 0.25);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 64, 77, 0.25)), color-stop(100%, #f5404d));
background-image: -webkit-linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
background-image: linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-transform: translate3d(0, 0, 0); }
.thumbcaption span {
padding: 0;
position: relative;
top: 52%;
opacity: 0;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
a:hover .thumbcaption {
opacity: 1; }
a:hover .thumbcaption span {
top: 48%;
opacity: 1; }
感谢您的帮助。
6 个答案:
答案 0 :(得分：0)
尝试为图像创建一个类，然后：
$( document ).ready(function() {
$('.thumbcaption').css('width', $('.imageclass').width());
});
应该工作
答案 1 :(得分：0)
The above annwer is not correct at all given by the user "http://stackoverflow.com/users/2865446/user2865446".
I have find out it .You mistakenly applied hover rule for the third div on <div> which is class="thumbcaption" instead of image.The other first two hover is applied on <img> tags.So please applied css rule on <img> tag to get your desire result.
Your css rule is for the third div
<div class="large-4 medium-4 small-6 columns">
<a href="#" title="block 3">
<div class="thumbcaption">
<span>TEST CAPTION</span>
</div>
<img src="http://placehold.it/350&text=.">
</a>
</div>
You can see there is no class for the <img>tag which is applied for the ohter two.So please remove any hover style if you applied on the third div and add class for the third <div><img class="fade" src="http://placehold.it/350&text=."> which is also applied on the ohter <img>elements of the rest <div>
答案 2 :(得分：0)
Check it may be helpful for you .I have given both html as well as css code
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Evan A. Russell | Design & Direction | New York City</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/grid-5.css">
<script src="js/vendor/custom.modernizr.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Navigation -->
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-12 columns">
<div id="logo">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="49.298px" height="44.583px" viewBox="3 224.667 49.298 44.583" enable-background="new 3 224.667 49.298 44.583"
xml:space="preserve">
<path fill="#161616" d="M49.598,249.169c-0.138,0.12-0.294,0.241-0.465,0.354c-0.906-1.521-2.064-3.232-1.538-5.278h0.043
c0.457,1.096,1.33,1.935,1.959,2.806c0.043,0.07,0.087,0.131,0.132,0.193l2.349-2.491c-0.037,1.107-0.417,2.41-1.255,3.25
C50.333,248.381,50.032,248.785,49.598,249.169"/>
<path fill="#161616" d="M49.797,246.222c-0.067-0.095-0.139-0.199-0.199-0.294c-1.062-1.528-2.001-3.411-1.789-5.554l0.02-0.044
c0,0,0.05,0.044,0.05,0.14c0.561,0.707,1.253,1.434,1.718,2.211c0.132,0.217,0.243,0.439,0.338,0.674
c0.508-0.985,1.442-1.487,1.986-2.359c0.061,0.112,0,0.19,0.095,0.346C52.155,243.388,51.17,244.927,49.797,246.222"/>
<path fill="#161616" d="M6.649,239.377c-0.062,0.439-0.013,0.92-0.125,1.381c-0.095,0.191-0.171,0.386-0.255,0.584
c-0.237,0.516-0.494,0.986-0.905,1.185c-0.291-0.666-0.549-1.373-0.575-2.19c0.051-0.531,0.186-1.021,0.398-1.484
c0.334-0.727,0.855-1.368,1.534-1.908c0.021-0.019,0.039-0.026,0.051-0.04l0.103,0.002c-0.025,0.067-0.049,0.143-0.075,0.223
C6.589,237.85,6.623,238.561,6.649,239.377"/>
<path fill="#161616" d="M6.115,243.044c0.53-0.684,1.444-1.228,1.764-1.91L8,241.108c0.148,0.76-0.043,1.599-0.406,2.323
c-0.425,0.95-1.061,1.632-1.479,2.565c-0.076,0.182-0.146,0.363-0.208,0.562c-1.266-1.348-2.391-2.825-2.407-4.822l2.333,1.789
C5.902,243.354,6.003,243.191,6.115,243.044"/>
<path fill="#161616" d="M5.815,253.735c0.103,0,0.2,0.01,0.3,0.018c0.97,0.078,1.893,0.27,2.637,0.692
c0.043,0.017,0.077,0.041,0.122,0.068l1.172-3.343l0.018-0.061c0.079,0.061,0.173,0.155,0.25,0.284
c1.323,1.582-0.631,3.768,0.166,5.52c-0.381-0.362-0.871-0.456-1.443-0.568c-0.093-0.043-0.191-0.079-0.284-0.124
c-1.002-0.423-1.96-0.886-2.637-1.629c-0.233-0.261-0.429-0.555-0.585-0.899C5.642,253.675,5.702,253.675,5.815,253.735"/>
<path fill="#161616" d="M14.944,263.522c0.078-0.034,0.165-0.061,0.24-0.087c0.779-0.25,1.564-0.457,2.342-0.525
c0,0,0-0.052-0.04-0.131c-0.814-1.026-0.211-2.737-1.143-3.723l0.026-0.018c1.059,0.467,1.726,1.298,2.246,2.257
c0.483,0.878,0.845,1.871,1.303,2.771c-0.43,0.018-0.873,0.104-1.303,0.217c-0.985,0.25-1.989,0.621-2.989,0.493
c-0.146-0.034-0.294-0.07-0.443-0.105c-0.629-0.189-1.165-0.521-1.474-1.053C14.089,263.651,14.487,263.556,14.944,263.522"/>
<path fill="#161616" d="M49.598,252.112c-0.569,0.381-1.312,0.623-2.003,0.71c-0.683-1.651-1.114-3.457-0.468-5.187l0.052-0.031
c0.174,0.345,0.21,0.715,0.416,1.045c0.38,0.62,0.785,1.191,1.123,1.855c0.294-0.206,0.586-0.396,0.88-0.576
c0.614-0.383,1.203-0.76,1.719-1.437c-0.241,1.236-0.552,2.454-1.301,3.284C49.882,251.896,49.746,252.009,49.598,252.112"/>
<path fill="#161616" d="M10.869,257.719c0.189,0.052,0.369,0.104,0.542,0.164c-0.381-1.141,0.153-2.238,0.096-3.368l0.018-0.045
c0.977,0.743,1.263,1.883,1.495,3.068c0.163,0.854,0.311,1.726,0.69,2.452c-0.233-0.053-0.456-0.087-0.69-0.12
c-0.241-0.037-0.493-0.061-0.751-0.069c-0.483-0.115-0.96-0.233-1.4-0.38c-0.821-0.286-1.554-0.659-2.117-1.219
c-0.258-0.258-0.484-0.562-0.658-0.907c0.208,0.026,0.433,0.053,0.658,0.08C9.46,257.461,10.203,257.554,10.869,257.719"/>
<path fill="#161616" d="M4.01,245.704c0.915,0.396,1.474,1.114,2.105,1.726c0.019,0.018,0.027,0.028,0.037,0.043l1.847-2.848h0.071
c1.062,2.22-1.062,3.695-1.191,5.655c-0.259-0.206-0.51-0.43-0.762-0.673c-0.474-0.451-0.956-0.941-1.476-1.372
c-0.647-0.667-1.104-1.806-0.991-2.817C3.784,245.479,3.864,245.591,4.01,245.704"/>
<path fill="#161616" d="M7.447,251.326c0.432-1.044,1.141-2.073,1.175-3.265l0.036-0.042l0.075,0.042
c0.01,0.008,0.02,0.026,0.02,0.035c0.051,0.113,0.111,0.181,0.214,0.301c0.667,1.522,0.365,3.238-0.214,4.725
c-0.094,0.243-0.19,0.477-0.304,0.711c-0.673-0.649-1.563-0.891-2.334-1.392c-0.067-0.051-0.133-0.095-0.207-0.149
c-0.723-0.646-1.104-1.629-1.215-2.545c0.492,0.214,0.975,0.396,1.422,0.62C6.6,250.602,7.06,250.896,7.447,251.326"/>
<path fill="#161616" d="M10.869,260.87c0.725,0.062,1.434-0.139,2.15-0.24c0.475-0.062,0.958-0.079,1.451,0.061
c0.018-0.079,0.018-0.133,0-0.207c-0.699-1.029-0.208-2.539-0.855-3.49c0.224,0,0.32,0.146,0.571,0.189
c0.431,0.242,0.752,0.57,0.999,0.967c0.745,1.149,0.874,2.799,1.488,3.999c-0.475-0.036-0.976,0-1.488,0.044
c-0.715,0.061-1.45,0.146-2.166,0.052c-0.449-0.059-0.882-0.192-1.305-0.434c-0.241-0.181-0.683-0.421-0.845-0.718
c-0.043-0.076-0.07-0.152-0.06-0.23C10.826,260.862,10.841,260.862,10.869,260.87"/>
<path fill="#161616" d="M45.987,256.172c0,0,0-0.053-0.027-0.129c-0.431-1.797-1.018-3.844,0.19-5.38h0.044l0.58,1.869l0.404,1.299
c0.692-0.361,1.626-0.552,2.42-0.666c0.293-0.043,0.571-0.068,0.812-0.094c-0.062,0.13-0.095,0.146-0.232,0.3
c-0.163,0.322-0.357,0.598-0.58,0.839c-0.745,0.806-1.771,1.226-2.824,1.65C46.517,255.964,46.248,256.068,45.987,256.172"/>
<path fill="#161616" d="M20.828,264.524c0.033-0.035,0.033-0.094,0.033-0.155c-0.381-0.26-0.568-0.751-0.871-1.21
c-0.07-0.793-0.38-1.691-0.545-2.333c1.633,0.528,2.573,2.065,3.525,3.411c2.885,1.556,6.39,1.859,9.465,0.384
c1.573-1.269,2.083-3.302,4.06-3.932c0.02,0.016,0.035,0.016,0.062,0.016c0,0.121-0.042,0.217-0.139,0.288
c-0.173,1.373-0.966,2.487-1.459,3.306c0.889,0.217,1.718,0.605,2.582,0.83c0.501,0.129,1,0.207,1.536,0.156
c-0.154,0.034-0.268,0.113-0.438,0.286c-0.347,0.242-0.717,0.413-1.099,0.525c-1.458,0.44-3.126-0.009-4.466-0.794
c-1.13,0-2.383,0.361-3.205,0.854l3.095,0.968v0.174c-0.149,0.415-0.245,0.95-0.684,1.156c-1.158-0.604-2.505-1.079-3.662-1.711
c-1.565,0.078-3.009,1.33-4.434,1.84c-0.128-0.052-0.249-0.077-0.267-0.129l-0.492-0.952c0.759-0.716,2.237-0.664,3.075-1.216
c-1.029-0.494-2.237-0.641-3.377-0.968c-1.011-0.017-1.503,0.838-2.488,1.088c-0.614,0.148-1.348,0.155-2.021,0.008
c-0.484-0.102-0.941-0.292-1.305-0.563c0.503-0.108,0.908-0.316,1.305-0.532C19.298,264.948,19.928,264.533,20.828,264.524"/>
<path fill="#161616" d="M43.517,259.264c-0.282-0.017-0.561-0.042-0.803-0.066h-0.069c0.025-0.07,0.042-0.141,0.069-0.208
c0.355-1.133,0.442-2.481,0.803-3.594c0.216-0.666,0.536-1.262,1.063-1.674h0.097l0.378,3.53l1.72-0.301l1.167-0.209
c-0.469,0.293-0.797,0.77-1.167,1.235c-0.235,0.294-0.494,0.588-0.813,0.81C45.322,259.264,44.374,259.308,43.517,259.264"/>
<path fill="#161616" d="M39.32,261.771c0.485-1.177,0.794-2.507,1.414-3.56c0.391-0.657,0.9-1.21,1.645-1.545
c-0.383,0.896-0.494,2.216-0.477,3.167c0.268-0.034,0.538-0.023,0.812,0.011c0.268,0.026,0.536,0.076,0.803,0.146
c0.631,0.139,1.254,0.319,1.824,0.319c-0.492,0.457-1.123,0.846-1.824,1.131c-0.257,0.104-0.523,0.189-0.803,0.268
c-0.646,0.184-1.322,0.269-1.979,0.26C40.252,261.968,39.769,261.899,39.32,261.771"/>
<path fill="#161616" d="M36.003,263.825c0.536-1.029,0.916-2.236,1.535-3.195c0.436-0.667,0.977-1.21,1.782-1.495h0.042
c-0.646,1.08-0.439,2.333-0.793,3.491c0.673,0.215,1.433,0.491,2.167,0.602c0.5,0.079,0.995,0.079,1.418-0.066
c-0.381,0.335-0.763,0.603-1.22,0.891c-0.06,0.05-0.129,0.093-0.199,0.136c-0.994,0.621-2.106,0.434-3.198,0.111
C37.024,264.145,36.504,263.966,36.003,263.825"/>
<path fill="#161616" d="M48.894,238.874c0.062,0.441,0.014,0.92,0.124,1.381c0.094,0.193,0.173,0.387,0.255,0.584
c0.238,0.516,0.495,0.986,0.907,1.186c0.29-0.667,0.549-1.374,0.576-2.191c-0.051-0.529-0.188-1.021-0.401-1.483
c-0.334-0.729-0.854-1.37-1.535-1.908c-0.019-0.021-0.035-0.025-0.046-0.041l-0.106,0.002c0.027,0.067,0.05,0.144,0.076,0.222
C48.956,237.346,48.919,238.058,48.894,238.874"/>
<path fill="#161616" d="M28.072,235.622c0,0-3.927,1.003-4.435,0.239c-0.507-0.761-1.108-2.959-3.188-5.333
c-2.08-2.377-3.927-5.694-3.927-5.694s-4.472,2.538-1.433,11.388c0.277,0.806-0.415,1.479-0.415,2.643
c0,1.167,2.309,3.363,2.309,3.363s-0.738,3.138-0.738,4.841c0,1.704,0.507,4.079,1.709,5.782c1.2,1.703,0.414,2.15,0.414,2.646
c0,0.489,0.324,4.347,2.22,3.092c1.893-1.256,4.859-4.472,7.215-4.427C30.162,254.207,28.072,235.622,28.072,235.622"/>
<path fill="#161616" d="M28.028,235.622c0,0,3.927,1.003,4.438,0.239c0.505-0.761,1.105-2.959,3.187-5.333
c2.077-2.377,3.925-5.694,3.925-5.694s4.474,2.538,1.433,11.388c-0.276,0.806,0.418,1.479,0.418,2.643
c0,1.167-2.31,3.363-2.31,3.363s0.737,3.138,0.737,4.841c0,1.704-0.507,4.079-1.707,5.782c-1.203,1.703-0.417,2.15-0.417,2.646
c0,0.489-0.323,4.347-2.218,3.092c-1.892-1.256-4.942-4.472-7.298-4.427C25.859,254.207,28.028,235.622,28.028,235.622"/>
<path fill="#FFFFFF" d="M28.052,235.601v9.384c0,0-3.423,4.303-3.699,5.333c-0.278,1.032-1.433,4.573-2.773,5.871
c-1.338,1.301-2.383,2.421-2.679,1.886c-0.347-0.63-0.786-2.021-0.416-2.422c0.368-0.402,1.34-0.896,1.479-1.748
c0.137-0.852,0.044-3.632,1.293-6.097c1.247-2.466,3.557-3.99,3.834-4.394c0.278-0.403-0.044-1.166-0.322-1.973
c-0.277-0.807-1.02-3.447,0.277-5.242C25.37,235.749,28.052,235.601,28.052,235.601"/>
<path fill="#FFFFFF" d="M28.047,235.577v9.383c0,0,3.421,4.304,3.699,5.334c0.277,1.031,1.433,4.574,2.772,5.876
c1.339,1.297,2.4,2.425,2.681,1.881c0.299-0.585,0.785-2.018,0.415-2.421c-0.37-0.403-1.341-0.896-1.477-1.75
c-0.14-0.851-0.047-3.629-1.295-6.097c-1.245-2.463-3.558-3.987-3.833-4.391c-0.276-0.404,0.046-1.167,0.323-1.973
c0.277-0.807,1.018-3.448-0.277-5.244C30.73,235.727,28.047,235.577,28.047,235.577"/>
<path fill="#161616" d="M28.211,249.892c0,0-4.158-0.045-4.342-1.704c-0.185-1.657,2.033-3.449,4.297-3.406
c2.262,0.046,4.388,1.792,3.835,3.184C31.445,249.354,30.29,249.758,28.211,249.892"/>
<path fill="#161616" d="M24.284,256.472c0,0,2.126,0.837,4.198,0.837c2.069,0,3.334-0.781,3.334-0.781s-1.324,1.228-2.128,1.395
c-0.805,0.168-0.646,0.344-0.414,0.565c0.229,0.225-1.37-0.232-1.196-0.454c0.172-0.224-1.564-0.494-0.702,0.286
c0.265,0.241-1.712-0.51-1.082-0.677C26.928,257.476,26.699,258.033,24.284,256.472"/>
<path fill="#FFFFFF" d="M23.006,243.632c0.03,0.492-0.771,0.944-1.792,1.008c-1.021,0.064-1.874-0.282-1.903-0.774
c-0.032-0.493,0.771-0.944,1.791-1.009C22.124,242.792,22.976,243.141,23.006,243.632"/>
<path fill="#FFFFFF" d="M36.674,243.861c-0.042,0.491-0.903,0.815-1.92,0.726c-1.021-0.091-1.81-0.563-1.765-1.053
c0.043-0.492,0.904-0.816,1.922-0.727C35.929,242.898,36.717,243.371,36.674,243.861"/>
<path fill="#161616" d="M22.356,243.731c0.059,1.15-0.409,2.124-1.042,2.174c-0.635,0.05-1.198-0.844-1.255-1.995
c-0.059-1.15,0.408-2.122,1.043-2.173C21.734,241.688,22.296,242.58,22.356,243.731"/>
<path fill="#161616" d="M35.788,243.851c-0.076,1.148-0.622,2.022-1.217,1.953c-0.596-0.069-1.017-1.057-0.938-2.204
c0.079-1.151,0.625-2.025,1.22-1.954C35.447,241.716,35.866,242.703,35.788,243.851"/>
<polygon fill="#FFFFFF" points="28.074,244.224 26.369,236.269 29.778,236.127 "/>
</svg>
</div>
</div>
</div>
<div id="topnavarea">
<div class="row">
<div class="large-12 columns">
<h6><span class="name">EVAN A. RUSSELL<span class="light"> // DESIGN & DIRECTION</span></span></h6>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h6 style="font-weight:700;"><a style="color: #0e0e0e;" href="#">WORK</a> <a class="nav" href="#">INFO</a></h6>
</div>
</div>
</div>
<div style="margin-top: 1.8em;" class="row">
<div class="large-4 medium-4 small-6 columns">
<div class="imagebg"><a title="block 1" href="#">
<img src="http://placehold.it/350&text=." class="fade"></a></div>
</div>
<div class="large-4 medium-4 small-6 columns">
<div class="imagebg"><a title="block 2" href="#"><img src="http://placehold.it/350&text=." class="fade"></a></div>
</div>
<div class="large-4 medium-4 small-6 columns ">
<a href="http://lukashaider.com/projects/forever-in-decay">
<div class="caption"><span>Forever in Decay</span></div>
<img src="http://lukashaider.com/content/01-projects/11-forever-in-decay/thumb.jpg">
</a>
</div>
</div>
</div>
<!-- End Thumbnails -->
<!-- Footer -->
<br />
<footer class="row">
<div class="large-12 columns"><hr />
<div class="row">
<div class="large-6 columns">
<p><span class="light">© COPYRIGHT EVAN A. RUSSELL</span></p>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
</div>
</div>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<!--
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.abide.js"></script>
-->
<script>
$(document).foundation();
</script>
</body>
</html>
css code is below
.caption {
position: absolute;
width: 91%;
height: 100%;
text-align: center;
opacity: 0;
background-color: rgba(245, 64, 77, 0.75);
background-color: rgba(245, 64, 77, 0.25);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 64, 77, 0.25)), color-stop(100%, #f5404d));
background-image: -webkit-linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
background-image: linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-transform: translate3d(0, 0, 0); }
.caption span {
padding: 1rem;
position: relative;
top: 52%;
opacity: 0;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
a:hover .caption {
opacity: 1; }
a:hover .caption span {
top: 48%;
opacity: 1; }
答案 3 :(得分：0)
图片缩略图看起来像这样。检查它可能是欲望的结果
答案 4 :(得分：0)
You have to use media
I used only case match like
@media screen and (min-width: 150px) and (max-width: 400px) {
/* start>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Hi This is css code for caption and others css rules
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.caption {
position: absolute;
width: 5%;
height: 100%;
text-align: center;
opacity: 0;
background-color: rgba(245, 64, 77, 0.75);
background-color: rgba(245, 64, 77, 0.25);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 64, 77, 0.25)), color-stop(100%, #f5404d));
background-image: -webkit-linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
background-image: linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-transform: translate3d(0, 0, 0); }
.caption span {
padding: 1rem;
position: relative;
top: 25%;
opacity: 0;
color: white;
text-transform: uppercase;
letter-spacing: 0.5em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
a:hover .caption {
width:65%;
opacity: 1; }
a:hover .caption span {
top: 48%;
font-size:40%;
opacity: 1; }
/* end>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Hi This is css code for caption and others css rules
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
}
答案 5 :(得分：0)
我找到了一个使用基础块网格的解决方案和使用z-index的这个方法：
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
您可以在此处查看示例http://www.evanarussell.com/newsite
调整窗口大小时，一切似乎都有效。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？