网格图像html

我是HTML的初学者，我正在尝试创建ma网格和图像，我想将文本翻转过图像，但我不能。有人会帮我吗？我做了几次测试，没有任何效果。如果我停下来，我正在研究这个问题，并且逐渐得到它，但是这次我需要帮助。代码：

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
    position:relative;
}
div.img:hover {
    border: px solid #777;
}
div.img img {
    width: 100%;
    height: auto;
}
#NomeAnime {
    position:relative;
    width:98%;
    left:2px;
    top:-20%; /* Posição vertical */
    color: white; /* Cor do texto */
    font: bold 13px arial, sans-serif; /* Fonte */
    text-align: center; /* Alinhamento */
    height: 16px;
    overflow: hidden;
    background-color:green;
}
</style>
</head>
<body>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200">
<div id="NomeAnime">teste</div></div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400">
<div id="NomeAnime">teste</div></div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400">
<div id="NomeAnime">teste</div></div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400">
<div id="NomeAnime">teste</div></div>
</div>
</body>
</html>

您应该将 id="NomeAnime"更改为 class="NomeAnime"，因为 id标识符对于每个HTML节点;

都应唯一

将您的CSS类声明从#NomeAnime更改为.NomeAnime，以匹配类Selector;

最后，将您的position:relative更改为"位置：绝对"和top:-20%' to顶部：20％`或按照您的需求。

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
    position:relative;
}
div.img:hover {
    border: px solid #777;
}
div.img img {
    width: 100%;
    height: auto;
}
.NomeAnime {
    position:absolute;
    width:98%;
    left:2px;
    top:20%; /* Posição vertical */
    color: white; /* Cor do texto */
    font: bold 13px arial, sans-serif; /* Fonte */
    text-align: center; /* Alinhamento */
    height: 16px;
    overflow: hidden;
    background-color:green;
}
</style>
</head>
<body>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="NomeAnime">teste</div></div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400">
<div class="NomeAnime">teste</div></div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400">
<div class="NomeAnime">teste</div></div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400">
<div class="NomeAnime">teste</div></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
    height: 10px;
    position:relative;
}
div.img:hover {
    border: px solid #777;
}
div.img img {
    width: 100%;
    height: auto;
}
#NomeAnime {
    position:relative;
    width:98%;
    left:2px;
    top:-20px; /* Posição vertical */
    color: white; /* Cor do texto */
    font: bold 13px arial, sans-serif; /* Fonte */
    text-align: center; /* Alinhamento */
    height: 16px;
    overflow: hidden;
    background-color:green;
}
</style>
</head>
<body>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div id="NomeAnime">teste</div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400">
    <div id="NomeAnime">teste</div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400">
<div id="NomeAnime">teste</div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400">
    <div id="NomeAnime">teste</div>
</div>
</body>
</html>

我更改了文本块，以旋转悬停。只需尝试这个

div.img {
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: 180px;
        position: relative;
    }
    div.img:hover {
        border: px solid #777;
    }
    div.img img {
        width: 100%;
        height: auto;
    }
    #NomeAnime {
        position: relative;
        width: 98%;
        left: 2px;
        top: -20%;
        /* Posição vertical */
        color: white;
        /* Cor do texto */
        font: bold 13px arial, sans-serif;
        /* Fonte */
        text-align: center;
        /* Alinhamento */
        height: 16px;
        overflow: hidden;
        background-color: green;
        -moz-transition: -moz-transform ease 0.6s;
        -webkit-transition: -webkit-transform ease 0.6s;
        -o-transition: -o-transform ease 0.6s;
        -ms-transition: -ms-transform ease 0.6s;
        transition: transform ease 0.6s;
    }
    div.img:hover #NomeAnime {
        color: #00FF22;
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }

html

<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div id="NomeAnime">
        <span>teste</span>
    </div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400">
    <div id="NomeAnime">
        <span>teste</span>
    </div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400">
    <div id="NomeAnime">
        <span>teste</span>
    </div>
</div>
<div class="img">
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400">
    <div id="NomeAnime">
        <span>teste</span>
    </div>
</div>

小提琴

https://jsfiddle.net/jaffar29sha/nc7a09ns/1/

相关内容

最新更新

热门标签：