个人中心
gpt4 book ai didi

html - 使用图像的确切尺寸在图像悬停时创建透明 div

转载 作者：行者123 更新时间：2023-11-27 23:31:53 25 4
gpt4 key购买 nike

我会向您解释我的问题。我有一个页面，其中有几张图片，每张图片的大小都不同。然后，我将能够创建一个类或其他允许我传递图像的类，在图像本身上方创建一个 div，其中包含一个按钮和一个题词，而无需更改页面布局。尤其是上面要有按钮，下面要有文字。下面是我当前用于页面的代码，没有悬停和 jsfiddle 的效果。

这是 JSFiddle .

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Find your PT</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body id="page-top">
    <nav class="navbar navbar-default navbar-expand-sm navbar-dark fixed-top">
        <div class="container">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="navbar-brand" href="../../index.html">Find Your PT</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto" id="ulNavBar">
                <li class="nav-item">
                    <a class="nav-link text-danger" href="../../php/view/loginSignup.html">Login</a>
                </li>
            </ul>
        </div>
    </nav>


    <header class="masthead">
        <section class="h-100 fullPageImage">
            <div class="row h-100 text-white font-weight-bold text-center">
                <div class="col-lg-12 h-50 my-auto">
                    <img src="https://img.wallpapersafari.com/tablet/2560/1700/56/31/wC2k5O.jpg" class="img-thumbnail h-75" alt="Profile Image" id="profilePicture">
                    <h1 class="text-uppercase border-bottom">
                        <span id="cognomeNome"></span>
                    </h1>
                    <h5>
                        <span id="descrizione"></span>
                    </h5>
                </div>
                <input type="file" name="upload1" id="uploadImageProfile" class="upload" multiple="multiple" />
                Massima dimensione delle immagini: 7mb

            </div>
        </section>
    </header>
</body>

</html>
.blurry-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

.masthead{
    height: 100%;
    width: 100%;
    min-height: 500px;
    background: linear-gradient(to bottom,rgba(140, 140, 140, 0.31) 0,rgba(0, 0, 0, 0.8) 100%);
}

.fullPageImage{
    background: url(https://img.wallpapersafari.com/tablet/2560/1700/56/31/wC2k5O.jpg);
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.row{
    margin:0 !important;
}

.flex-column {
    max-width: 260px;
}

img {
    margin: 5px;
}

.scale {
    transform: scaleY(1.05);
    padding-top: 5px;
}

body,html {
    height: 100%;
}

.v-center {
    position: relative;
    transform: translatey(-50%);
    top: 50%;
}

.navbar-default{
    transition:100ms ease;
    background: #0000003b;
}
.navbar-default.scrolled{
    background:#000;
}

.label:after {
    content: '\A';
    white-space: pre;
}

.hideme{
    opacity:0;
}

@media (min-width: 992px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform:translateY(0rem);
        opacity: 1;
    }
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }
    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}


.profileImage{
    border: 5px solid white;
}

因此，通过中央个人资料图像，我希望出现上面描述的 div。如果您成功使用类似于下页效果 13 的效果:https://miketricking.github.io/bootstrap-image-hover/#

但这是我可以处理的另一个问题，虽然在图像上方创建 div 本身也涉及我所做的不必要的布局更改。

添加了 2 截图: good layout

Bad aspect ratio

PS:图片来源 Gerd Altmann来自 Pixabay

最佳答案

让我尝试通过修改现有代码来回答您的问题。看看这个片段

.blurry-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

.masthead{
    height: 100%;
    width: 100%;
    min-height: 500px;
    background: linear-gradient(to bottom,rgba(140, 140, 140, 0.31) 0,rgba(0, 0, 0, 0.8) 100%);
}

.fullPageImage{
    background: url(https://img.wallpapersafari.com/tablet/2560/1700/56/31/wC2k5O.jpg);
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.row{
    margin:0 !important;
}

.flex-column {
    max-width: 260px;
}

img {
    margin: 5px;
}

.scale {
    transform: scaleY(1.05);
    padding-top: 5px;
}

body,html {
    height: 100%;
}

.v-center {
    position: relative;
    transform: translatey(-50%);
    top: 50%;
}

.navbar-default{
    transition:100ms ease;
    background: #0000003b;
}
.navbar-default.scrolled{
    background:#000;
}

.label:after {
    content: '\A';
    white-space: pre;
}

.hideme{
    opacity:0;
}

@media (min-width: 992px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform:translateY(0rem);
        opacity: 1;
    }
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }
    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}


.profileImage{
    border: 5px solid white;
}

#profilePicture{
display:inline-block;
background-image: url('https://img.wallpapersafari.com/tablet/2560/1700/56/31/wC2k5O.jpg');
background-size:cover;
background-repeat:no-repeat;
border: 5px solid white;
width: 12em;
height: 9em;
cursor: pointer;
}

.hoverLayout{
visibility:hidden;
position:relative;
height:100%;
width:100%;
}

#profilePicture:hover > .hoverLayout{
  visibility:visible;
  animation: slideIn ease-in-out .75s forwards;
}

.hoverLayout:hover{
  visibility:visible;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Find your PT</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body id="page-top">
    <nav class="navbar navbar-default navbar-expand-sm navbar-dark fixed-top">
        <div class="container">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="navbar-brand" href="../../index.html">Find Your PT</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto" id="ulNavBar">
                <li class="nav-item">
                    <a class="nav-link text-danger" href="../../php/view/loginSignup.html">Login</a>
                </li>
            </ul>
        </div>
    </nav>


    <header class="masthead">
        <section class="h-100 fullPageImage">
            <div class="row h-100 text-white font-weight-bold text-center">
                <div class="col-lg-12 h-50 my-auto">
                    <div class="profilePicture" alt="Profile Image" id="profilePicture">
                    <div class="hoverLayout">
                    <h1 class="text-uppercase border-bottom">
                        <span id="cognomeNome">Title</span>
                    </h1>
                    <h5>
                        <span id="descrizione">Description</span>
                    </h5>
                </div>
                </div>
                </div>
                <input type="file" name="upload1" id="uploadImageProfile" class="upload" multiple="multiple" />
                Massima dimensione delle immagini: 7mb

            </div>
        </section>
    </header>
</body>

</html>

关于html - 使用图像的确切尺寸在图像悬停时创建透明 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57448800/

25 4 0
文章推荐： php - 通知 : Undefined index: buttonstyle in
文章推荐： javascript - 加载和连接 js/jsx 文件
文章推荐： css - 用背景色完全填充页面
文章推荐： html - 滚动条不会在移动设备上完全向下滚动页面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com