ArtigosHover de quadro em página html personalizada
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Hover de quadro em página html personalizada
por Zênite 04.02.19 20:09
Detalhes da questão
Endereço do fórum: http://rikudourpg.forumeiros.com/
Versão do fórum: ModernBB
Descrição
Olá! Gostaria de ajuda em dar um detalhe a mais na minha página HTML customizada (http://rikudourpg.forumeiros.com/h1-pagina-inicial-construcao)
Queria saber se é possível colocar uma função hover para que os quadro fiquem levemente maiores quando o mouse passar em cima dele. No caso, seriam os 9 quadros do meio, apenas.
O código da página é o seguinte:
- Código:
<!-- -------------- Todos os créditos Reservados --------------- -->
<!-- -------------- Feito por iPrompt - FDF --------------------- -->
<!-- -------------- Não retirar os créditos por favor ----------- -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Naruto Rikudou</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
footer {
display: block;
position: absolute;
bottom: -30;
width: 65%;
opacity: 0.6;
}
#ultassunto {
width: 36%;
margin: 1rem auto;
background: transparent;
background-size: cover;
display: flex;
}
.boxult {
width: 240px;
margin-left: 490px!important;
height: 420px;
box-sizing: border-box;
padding: 1rem;
margin: 1rem;
text-align: center;
position: absolute;
border-radius: 10px;
color: white;
z-index: 2;
background-color: #1b1f2f;
margin-top: 30px!important;
}
#id4 {
float:left;
}
#id3 {
float:left;
}
body {
background: url('https://i.pinimg.com/originals/3d/dd/dd/3ddddd244c58ae57efa31fb2163b72d7.png') no-repeat;
overflow: hidden;
width: 100vw;
height: 100vh;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
display: block;
}
#container img {float:left}
.container {
width: 30%;
margin-left: -140px!important;
margin: 1rem auto;
background: transparent;
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
background-size: cover;
}
.box {
width: 140px;
height: 130px;
box-sizing: border-box;
padding: 1rem;
margin: 1rem;
position: relative;
border-radius: 10px;
color: white;
z-index: 2;
background-color: #1b1f2f;
}
#id3
{
float:right;
}
.barra {
background-color: black;
position: relative;
left: 0;
float: right!important;
right: 0;
height: 45px;
margin-top: -9px;
width: 390px;
border-bottom-left-radius: 16px;
color: white!important;
}
div p{
float:right;
font-size: 20px;
margin-top: -5px;
padding: 15px;
display: block;
position: absolute;
}
.mod-recent-row {
display: block;
background: #f7f7f7;
margin: 5px;
padding: 5px;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.mod-recent-row span {
color: black;
}
a.mod-recent-title {
display: block;
}
i[class*='ion-'] {
margin: 5px;
}
.mod-recent-row a {
text-decoration: none;
}
.lastsubjects marquee {height: 23em !important;}
</style>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
(function($) {
'use strict';
$(function() {
$('.subject-last-load').load('/forum .lastsubjects', function() {
var $marq = $(".marquee");
$marq.replaceWith(function () {
return $('<marquee/>', {
direction: 'up',
html: this.innerHTML
});
});
});
});
}(jQuery));
</script>
<div class="barra">
<span>
</span>
<p style="">
<a href="”register”">Cadastre-se</a>. Já é registrado? <a href="login">Faça seu login</a>
</p><span></span>
</div>
<div style="" class="main-header__logo">
<center>
<img class="header-logo" alt="Naruto Rikudou" src="https://i.imgur.com/wHHv814.png" style="width: 300px;margin-left: 0px;" />
</center>
</div>
<div id="ultassunto">
<div class="boxult">
<img src="imagem" alt="" /> <span>Último assuntos</span>
<div class="subject-last-load"></div>
</div>
<div class="container">
<div id="id4">
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="http://www.jeuxzone.net/timthumb.php?src=/images/games/18806_250x150.jpg&w=140&h=110" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>
<center>
<span>Fórum</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/LVjDaYY.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Solicitações</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="http://idws.id/uploads/forum/single/1408746506.jpeg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Off-topic</span>
</center>
</div>
</div>
<div id="id2">
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/flAzjCx.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Regras</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/uHAZiRV.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Assembleia</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/HQAkN3v.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Podcast</span>
</center>
</div>
</div>
<div id="id3">
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/gmBx5Lu.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Registros</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/4saoTy2.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Mundo</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/bNRtWLO.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Parceiros</span>
</center>
</div>
</div>
</div>
<footer> </footer>
<p style="display: block;
position: absolute;
bottom: -30px!important;
width: 65%;
opacity: 0.6;">
Todos direitos reservados / Feito Exclusivo a Naruto Rikudo RPG / 2019 - 2019
</p><footer></footer>
</div>
</body>
</html>
Obrigado desde já, boa tarde!
Zênite- ****
- Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316 -
Re: Hover de quadro em página html personalizada
por Key of Destiny 04.02.19 20:46
Boa tarde,
Troque o código por esse.
Troque o código por esse.
- Código:
<!-- -------------- Todos os créditos Reservados --------------- -->
<!-- -------------- Feito por iPrompt - FDF --------------------- -->
<!-- -------------- Não retirar os créditos por favor ----------- -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Naruto Rikudou</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
footer {
display: block;
position: absolute;
bottom: -30;
width: 65%;
opacity: 0.6;
}
#ultassunto {
width: 36%;
margin: 1rem auto;
background: transparent;
background-size: cover;
display: flex;
}
.boxult {
width: 240px;
margin-left: 490px!important;
height: 420px;
box-sizing: border-box;
padding: 1rem;
margin: 1rem;
text-align: center;
position: absolute;
border-radius: 10px;
color: white;
z-index: 2;
background-color: #1b1f2f;
margin-top: 30px!important;
}
#id4 {
float:left;
}
#id3 {
float:left;
}
body {
background: url('https://i.pinimg.com/originals/3d/dd/dd/3ddddd244c58ae57efa31fb2163b72d7.png') no-repeat;
overflow: hidden;
width: 100vw;
height: 100vh;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
display: block;
}
#container img {float:left}
.container {
width: 30%;
margin-left: -140px!important;
margin: 1rem auto;
background: transparent;
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
background-size: cover;
}
.box {
width: 140px;
height: 130px;
box-sizing: border-box;
padding: 1rem;
margin: 1rem;
position: relative;
border-radius: 10px;
color: white;
z-index: 2;
background-color: #1b1f2f;
transition:.7s;
}
.box:hover {
transform:scale(1.1);
transition:.7s;
}
#id3
{
float:right;
}
.barra {
background-color: black;
position: relative;
left: 0;
float: right!important;
right: 0;
height: 45px;
margin-top: -9px;
width: 390px;
border-bottom-left-radius: 16px;
color: white!important;
}
div p{
float:right;
font-size: 20px;
margin-top: -5px;
padding: 15px;
display: block;
position: absolute;
}
.mod-recent-row {
display: block;
background: #f7f7f7;
margin: 5px;
padding: 5px;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.mod-recent-row span {
color: black;
}
a.mod-recent-title {
display: block;
}
i[class*='ion-'] {
margin: 5px;
}
.mod-recent-row a {
text-decoration: none;
}
.lastsubjects marquee {height: 23em !important;}
</style>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
(function($) {
'use strict';
$(function() {
$('.subject-last-load').load('/forum .lastsubjects', function() {
var $marq = $(".marquee");
$marq.replaceWith(function () {
return $('<marquee/>', {
direction: 'up',
html: this.innerHTML
});
});
});
});
}(jQuery));
</script>
<div class="barra">
<span>
</span>
<p style="">
<a href="”register”">Cadastre-se</a>. Já é registrado? <a href="login">Faça seu login</a>
</p><span></span>
</div>
<div style="" class="main-header__logo">
<center>
<img class="header-logo" alt="Naruto Rikudou" src="https://i.imgur.com/wHHv814.png" style="width: 300px;margin-left: 0px;" />
</center>
</div>
<div id="ultassunto">
<div class="boxult">
<img src="imagem" alt="" /> <span>Último assuntos</span>
<div class="subject-last-load"></div>
</div>
<div class="container">
<div id="id4">
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="http://www.jeuxzone.net/timthumb.php?src=/images/games/18806_250x150.jpg&w=140&h=110" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>
<center>
<span>Fórum</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/LVjDaYY.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Solicitações</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="http://idws.id/uploads/forum/single/1408746506.jpeg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Off-topic</span>
</center>
</div>
</div>
<div id="id2">
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/flAzjCx.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Regras</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/uHAZiRV.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Assembleia</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/HQAkN3v.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Podcast</span>
</center>
</div>
</div>
<div id="id3">
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/gmBx5Lu.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Registros</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/4saoTy2.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Mundo</span>
</center>
</div>
<div class="box">
<a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/bNRtWLO.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a> <img src="imagem" alt="" />
<center style="margin-top: -24px;">
<span>Parceiros</span>
</center>
</div>
</div>
</div>
<footer> </footer>
<p style="display: block;
position: absolute;
bottom: -30px!important;
width: 65%;
opacity: 0.6;">
Todos direitos reservados / Feito Exclusivo a Naruto Rikudo RPG / 2019 - 2019
</p><footer></footer>
</div>
</body>
</html>
Key of Destiny- ****
- Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442
Re: Hover de quadro em página html personalizada
por Zênite 05.02.19 1:16
Boa noite! Está perfeito! Essa foi rápida ein
Muito obrigado, mesmo! Podem fechar!!!!
Muito obrigado, mesmo! Podem fechar!!!!
Zênite- ****
- Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316 -
Re: Hover de quadro em página html personalizada
por Convidado 05.02.19 7:46
Tópico resolvidoMovido para "Questões resolvidas". |
Convidado- Convidado
Tópicos semelhantes» Definir página HTML personalizada como página inicial
» Página HTML personalizada
» Página html personalizada
» Pagina HTML personalizada
» Página HTML personalizada
» Página HTML personalizada
» Página html personalizada
» Pagina HTML personalizada
» Página HTML personalizada
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos