I need to make a code for a button (which is an image) when I move the mouse the image will go up and a text goes down (name of the image icon), already tried to leave the button with opacity (0) and a hover with text opacity (1) when the image raises the text appears, however it did not work because the text stays in front (z-index did not work) if someone has another idea ...
->Howisit?
- > as it should be (there the image goes up and the title appears)
[sorry for the quality of the photo]
A simple way is to use the button image as the background of the link, so you can put a specific background for each button, and use your own tag for the text and make the transition: the button goes up and the text goes down:
body{
background: orange;
}
.botao{
width: 100px;
height: 100px;
position: relative;
float: left;
margin: 5px;
}
.botao a{
width: 100%;
height: 100%;
display: inline-block;
background-size: cover;
position: absolute;
left: 0;
top: 0;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
transition: all .3s ease;
}
.botao a b{
color: #fff;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
z-index: -1;
opacity: 0;
transition: all .3s ease;
}
.botao:hover a{
top: -15px;
}
.botao:hover a b{
bottom: -20px;
opacity: 1;
}<div class="botao">
<a href="#" style="background-image: url(https://static.abcteach.com/free_preview/a/astronomybnw_p.jpg);">
<b>Astronomia</b>
</a>
</div>
<div class="botao">
<a href="#" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfDlmiriiir4kVcIu0CDe1j0Rd2rTxD8rSPAuGBABkZZ9KpzBfFQ);">
<b>Geografia</b>
</a>
</div>Friend, if I understand correctly, this is the effect you need. I did the simplest way to stay more didactic.
Basically you have a text with poition:absolute and z-index:-1 when you do :hover in .wrapper a img makes transform:translateY(-40px) text appears below.
.wrapper {
position: relative;
width: 100px;
height: 100px;
overflow:hidden;
}
.wrapper img {
transition: transform 500ms ease;
}
.wrapper:hover img {
transform: translateY(-40px);
}
.wrapper .txt {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-family: sans-serif;
font-size: 2rem;
color: red;
z-index: -1;
}<div class="wrapper">
<div class="txt">Texto</div>
<img src="http://placecage.com/100/100"alt="">
</div>Using% w / CSS , you can do this as follows. You can read more about this property at MDN page
button {
padding: 8px 14px;
background: #0084ff;
background-image: url("https://s19.postimg.cc/4khrr69kz/img_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
border: none;
border-radius: 5px;
font-size: 15px;
color: transparent;
background-position: 0 0px;
transition: .7s ease-in-out 0s;
}
button:hover {
color: #fff;
background-position: 0 -50px;
transition: .7s ease-in-out 0s;
}<div>
<button>Change color</button>
</div>One way using jQuery is as follows.
$(document).ready(function() {
// DOM cache
var $banner = $("#banner-message");
var $button = $("button");
// Button properties
var bColor = {
over : $button.css("color"),
out : "transparent"
}
// Set color
$button.css({ "color" : bColor.out });
// Events
$button.on("mouseover", function() {
var height = $button.css("height");
$(this).animate({
"background-position-y" : "-=" + height
}, 500, function() {
$(this).css("color", bColor.over);
});
});
$button.on("mouseout", function() {
$(this).css("color", bColor.out);
$(this).animate({
"background-position-y" : 0
}, 500);
})
});button {
padding: 8px 14px;
background: #0084ff;
background-image: url("https://s19.postimg.cc/4khrr69kz/img_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
border: none;
border-radius: 5px;
font-size: 15px;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Change color</button>
</div>But this jQuery script will require adaptations if there is more than one button on the page.