I’m trying to create a portfolio as a project, in this case I’m working on the header and I want to put an image as a logo.
However, to follow the same hover style of the other elements in the header, I wanted to do the same for the image by trying to place two images that swap when you hover over them.
I did the above, my problem is that I want to follow the exact same hover style in the header, that implies the transition time which is .5s, which doesn’t work for me and I haven’t been able to achieve.
my HTML file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio of Systems and Computing Engineer and Mechatronic Engineer, Neyan Montes">
<meta name="keywords" content="portfolio, computing, systems, mechatronic, engineer, computing engineer, systems engineer, mechatronic engineer">
<meta name="autor" content="Neyan Montes">
<title>Portfolio</title>
<!-- My Shortcut Icon -->
<link rel="shortcut icon" type="image/x-icon" href="light.ico" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- My Styles -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Header -->
<header>
<div class="left-info">
<div class="imagen">
<a href="#home">
<img src="light.ico" alt="logo">
</a>
</div>
<div class="info">
<a href="">+57 312 589 7211</a>
<p>/</p>
<a href="">[email protected]</a>
</div>
</div>
<nav>
<ul class="links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skill">Skills</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="toggle-btn">
<i class="fa-solid fa-bars"></i>
</div>
</nav>
</header>
<!-- Home Section -->
<section id="home">
</section>
<!-- About Section -->
<section id="about">
</section>
<!-- Skill Section -->
<section id="skill">
</section>
<!-- Project Section -->
<section id="project">
</section>
<!-- Contact Section -->
<section id="contact">
</section>
<!-- Footer -->
<footer>
</footer>
<!-- My Scripts -->
<script src="scripts.js"></script>
</body>
</html>
my CSS file is:
/* GOOGLE FONT */
/* CONSTANT VALUE */
:root{
--dark: #2C3639;
--intermedium: #A27B5C;
--light: #DCD7C9;
}
/* CSS RESET */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-style: italic;
background-color: var(--dark);
}
/* HEADER */
header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1% 2% 1% 2%;
}
header .left-info{
display: flex;
align-items: center;
}
header .left-info .imagen img {
transition: all .5s ease-in-out;
}
header .left-info .imagen:hover img {
content: url('intermedium.ico');
}
header .left-info .info{
display: flex;
width: 500px;
align-items: center;
justify-content: space-between;
margin-left: 20%;
}
header .left-info .info a{
color: var(--light);
}
header .left-info .info p{
color: var(--light);
}
header .left-info .info a:hover{
color: var(--intermedium);
transition: .5s;
}
header nav .links{
display: flex;
gap: 2rem;
}
header nav .links li{
list-style: none;
}
header nav .links a{
color: var(--light);
}
header nav .links a:hover{
color: var(--intermedium);
transition: .5s;
}
header nav .toggle-btn{
color: var(--light);
font-size: 1.5rem;
cursor: pointer;
display: none;
}
header .dropdown-menu{
position: absolute;
right: 2rem;
top: 60px;
width: 300px;
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(15px) !important;
border-radius: 10px !important;
overflow: hidden !important;
}
/* RESPONSIVE HEADER */
@media (max-width: 1070px){
header nav .links{
display: none;
}
header nav .toggle-btn{
display: block;
}
}
@media (max-width: 730px){
header nav .links,
header .left-info .info{
display: none;
}
header nav .toggle-btn{
display: block;
}
}
I have tried modifying the html and putting the 2 images in it, then modifying the css so that one of the header images is hidden and then displayed when the pointer is hovered, however this conflicts in the header, leaving the images out of the box itself.
I also tried to implement js but it still doesn’t work.
As is, as you can see in the code, it works, I just want to make a transition and not have the other image suddenly appear.
2
Answers
Have you tried animating the opacity with keyframes? This way you can animate an element that goes from display none to a visible display value.
Small code example:
html:
CSS:
I don’t know for sure if it will work with animation(since I haven’t touched CSS animations yet) but try changing the z-index of the logo upon hover