I'm trying to have an infobox that is a round icon which expands and includes a textbox when hovered. At the same time, I want the picture to link externally as well. My current code works fine on desktops, but not on mobile as the hover function requires you to click the picture of the bottle - thus redirecting you.
The text inside the box is coded with content:
.boxbox1::after {
content: "Vores røde eddiker er udelukkende IGP og DOP og findes i mange forskellige prisklasser. Tryk på flasken og se vores sortiment!";
}
Solutions that I can think of but do not know how to execute:
- Remove the link in the picture & have the text in a paragraph and linking externally through the text
- Somehow making the first click on the picture expand the textbox, and then have the second click on the picture link externally.
Both solutions work fine for me, I don't have a preference. Thank you in advance!
JSFiddle: https://jsfiddle.net/rt9Ljsc6/
HTML:
<section id="eddikefarver">
<h2 class="h2titel">Vores produkter</h2>
<div class="bigbox">
<div class="super-box">
<div class="infocontainer">
<div class="boxbox1">
<div class="icon_bg"></div>
</div>
<div class="icon">
<a href="#" class="billedelink">
<img width="42" height="40" src="img/balsamicoroed.png" alt="Rød balsamicoeddike ikon">
</a>
</div>
</div>
<div class="text">
<p class="title">Røde eddiker</p>
</div>
</div>
</div>
</section>
CSS:
.bigbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 35vh;
font-family: system, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 20px;
color: #5d6494;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.infocontainer {
width: 220px;
height: 220px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.boxbox1,
.boxbox2,
.boxbox3 {
position: absolute;
width: 220px;
height: 220px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 3px;
overflow: hidden;
-webkit-transition: -webkit-box-shadow ease 1s;
transition: -webkit-box-shadow ease 1s;
transition: box-shadow ease 1s;
transition: box-shadow ease 1s, -webkit-box-shadow ease 1s;
}
.icon {
position: relative;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
will-change: transform;
}
.icon_bg {
width: 80px;
height: 80px;
border-radius: 100%;
border: 1px solid rgba(225, 227, 232, 0.18);
-webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
will-change: transform;
}
.title {
position: relative;
font-size: 20px;
}
.super-box:hover .boxbox1,
.super-box:hover .boxbox2 .super-box:hover .boxbox3 {
/* border: 1px solid rgba(225, 227, 232, 0.18); */
-webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
}
.super-box:hover .icon_bg {
-webkit-transform: translateY(-32px) scale(6);
transform: translateY(-32px) scale(6);
}
.super-box:hover .icon {
-webkit-transform: translateY(-48px) scale(1.4);
transform: translateY(-48px) scale(1.4);
}
.super-box {
width: 220px;
height: 220px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 auto;
}
.text {
position: relative;
top: -32px;
width: 200px;
text-align: center;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
}
.super-box:hover .text {
opacity: 0;
-webkit-transform: translateY(-4px) scale(.8);
transform: translateY(-4px) scale(.8);
}
.boxbox1::after,
.boxbox2::after,
.boxbox3::after {
position: absolute;
width: 200px;
text-align: center;
top: 111px;
opacity: 0;
font-size: 13px;
color: #5d6494;
line-height: 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
}
.boxbox1::after {
content: "Vores røde eddiker er udelukkende IGP og DOP og findes i mange forskellige prisklasser. Tryk på flasken og se vores sortiment!";
}
.boxbox2::after {
content: "Vi tilbyder en norditaliensk hvid balsamicoeddike som den eneste af sin slags, fordi den kort fortalt er ekstraordinær. Tryk på flasken for se mere!";
}
.boxbox3::after {
content: "Vores balsamico-æbleeddiker er fra Gölles og fås i både spray-flaske og chianti flaske med prop. Tryk på flasken for at se mere!";
}
.super-box:hover .boxbox1::after,
.super-box:hover .boxbox2::after,
.super-box:hover .boxbox3::after {
opacity: 1;
}
.billedelink:hover {
opacity: 0.6;
}