Javascript 网格图像HTML

我是HTML的初学者，我正在尝试创建ma网格和图像，我想在图像上翻转文本，但我做不到。有人能帮我吗？我做了几次测试，结果什么都没用。如果我停下来，我正在研究这个问题，渐渐地我明白了，但这次我需要帮助。守则：

部门经理{
保证金：5px；
边框：1px实心#ccc；
浮动：左；
宽度：180px；
位置：相对位置；
}
div.img：悬停{
边框：px实心#777；
}
部门经理经理经理{
宽度：100%；
高度：自动；
}
#诺姆动画{
位置：相对位置；
宽度：98%；
左：2px；
顶部：-20%；/*垂直位置*/
颜色：白色；/*Cor do texto*/
字体：粗体13px arial，无衬线；/*Fonte*/
文本对齐：居中；/*Alinhamento*/
高度：16px；
溢出：隐藏；
背景颜色：绿色；
}
睾丸
睾丸
睾丸
睾丸

您应该将

id=“NomeAnime”

更改为

class=“NomeAnime”

，因为

id

标识符对于每个HTML节点都应该是唯一的

将css类声明从

#NomeAnime

更改为

.NomeAnime

，以匹配类选择器

最后，将您的

position:relative

更改为'position:absolute'，并将

top:-20%'更改为
top:20%`或根据需要更改



部门经理{
保证金：5px；
边框：1px实心#ccc；
浮动：左；
宽度：180px；
位置：相对位置；
}
div.img：悬停{
边框：px实心#777；
}
部门经理经理经理{
宽度：100%；
高度：自动；
}
.NomeAnime{
位置：绝对位置；
宽度：98%；
左：2px；
顶部：20%；/*垂直位置*/
颜色：白色；/*Cor do texto*/
字体：粗体13px arial，无衬线；/*Fonte*/
文本对齐：居中；/*Alinhamento*/
高度：16px；
溢出：隐藏；
背景颜色：绿色；
}
睾丸
睾丸
睾丸
睾丸


部门经理{
保证金：5px；
边框：1px实心#ccc；
浮动：左；
宽度：180px；
高度：10px；
位置：相对位置；
}
div.img：悬停{
边框：px实心#777；
}
部门经理经理经理{
宽度：100%；
高度：自动；
}
#诺姆动画{
位置：相对位置；
宽度：98%；
左：2px；
顶部：-20px；/*垂直位置*/
颜色：白色；/*Cor do texto*/
字体：粗体13px arial，无衬线；/*Fonte*/
文本对齐：居中；/*Alinhamento*/
高度：16px；
溢出：隐藏；
背景颜色：绿色；
}
睾丸
睾丸
睾丸
睾丸
我已将文本块更改为悬停时旋转。试试这个

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


睾丸
睾丸
睾丸
睾丸

拨弄

请将您的帖子翻译成英语！嗯，如果你能把你的问题翻译成英语那就太好了：-）我是HTML的初学者，我正在尝试创建一个网格和图像，我想在图像上翻转文本，但我做不到。有人能帮我吗？我做了几次测试，结果什么都没用。如果我停下来，我正在研究这个问题，渐渐地我明白了，但这次我需要帮助。代码：
id
元素对于html页面必须是唯一的。（您有
NomeAnime
列出了多个times@DavidBenner，你也可以用葡萄牙语在stackoverflow上发帖（voce pode postar no stackoverflow em葡萄牙语）@DavidBanner，如果答案没有达到你的预期，那么你需要什么？
<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>