Menu
open AI code to work on …
This code should work as it looks good just organise it
Here is an example of how you could achieve this using CSS and HTML:
/* Define a common class for the containers */
.container {
display: inline-block;
width: 33%; /* Split the container into 3 equal parts */
position: relative;
cursor: pointer;
}
/* Style the shared photo */
.shared-photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* Style the container when it is highlighted */
.container:hover .shared-photo {
z-index: 2;
}
/* Style the individual photos for each container */
.container-1 .individual-photo {
background-image: url('photo-1.jpg');
}
.container-2 .individual-photo {
background-image: url('photo-2.jpg');
}
.container-3 .individual-photo {
background-image: url('photo-3.jpg');
}
<!-- HTML structure for the containers -->
<div class="container container-1">
<div class="shared-photo"></div>
<div class="individual-photo"></div>
</div>
<div class="container container-2">
<div class="shared-photo"></div>
<div class="individual-photo"></div>
</div>
<div class="container container-3">
<div class="shared-photo"></div>
<div class="individual-photo"></div>
</div>
When the user hovers over a container, the shared photo will appear on top of the individual photo for that container. This can be achieved by using the z-index property to specify the stacking order of the elements. The shared photo has a lower z-index than the individual photo, so it appears behind it by default. When the container is highlighted, the shared photo’s z-index is increased to be higher than the individual photo, causing it to appear on top.
You can customize the appearance of the containers and photos by adding additional CSS styles as needed. For example, you could add a border or background color to the containers, or set the size and position of the photos using the width, height, and background-size properties.
Added rotation in CSS for cogs.
.gear5{animation: animation-gear5 6s
linear 0s infinite
}
.gear5{transform-origin: center;
display: inline-block;
}
@keyframes animation-gear5 {
100% {
transform: rotate(270deg) translateX(110px) rotate(0deg);
}
0% {
transform: rotate(-90deg) translateX(110px) rotate(-900deg);
}
}
Do You have a project you would like us to work on? Or perhaps a few questions? Contact us, or send your RFP.
We will happily assist you with and questions or requests.
Please provide your details below and we will contact you within 24 hours