Support
Quality
Security
License
Reuse
kandi has reviewed croissant and discovered the below as its top functions. This is intended to give you an instant insight into croissant implemented functionality, and help decide if they suit your requirements.
Get all kandi verified functions for this library.
Get all kandi verified functions for this library.
Command framework No need to declare commands in your plugin's plugin.yml file Automated argument parsing and tab-completion Arguments are inferred from method parameters Arguments can be either required or optional, and optional arguments can have default values Built-in argument types + ability to create your own argument types Subcommands
GUI framework Create interactive GUIs from fake chest inventories Supports both single-page GUIs and multi-page GUIs with navigation buttons (referred to as "scrollable GUIs")
QUESTION
css positioning problem with hover pseudo class
Asked 2021-Jun-15 at 01:41I'm trying to design a simple page for practicing with just html and css. I used a hover pseudo class for the croissant image. It works but when I hover the mouse over the croissant the coffee cup image will move to right a little(almost 50 or 100 pixels) and when I hover off of the croissant the coffee cup will back in its position before. meanwhile I'm new in web design and just start learning few days. here's my code:
body {
margin: 0px;
background-image: url('https://c8.alamy.com/comp/2BT68F1/vector-black-chalkboard-style-hand-drawn-bakery-horizontal-border-pattern-suitable-for-bread-packaging-cafe-menu-design-and-wallpaper-2BT68F1.jpg');
background-size: cover;
}
#img1 {
background-repeat: no-repeat;
width: 100%;
height: 40%;
}
#instagram1 {
width: 20px;
height: 20px;
float: left;
}
#instagram2 {
width: 20px;
height: 20px;
position: relative;
right: 168px;
top: 5px;
}
#bakery {
color: black;
float: left;
position: relative;
bottom: 15px;
left: 5px;
}
#cafe {
color: black;
float: left;
position: relative;
right: 75px;
bottom: 10px;
}
div {
width: 200px;
height: 60px;
float: right;
position: relative;
top: 550px;
background-color: #b3d9ff;
}
#croissant {
width: 200px;
height: 100px;
position: relative;
left: 1100px;
top: 250px;
}
#espresso {
position: relative;
top: 280px;
right: 150px;
width: 200px;
height: 150px;
}
#croissant:hover {
width: 250px;
height: 150px;
}
<img id="croissant" src="https://freepngimg.com/thumb/croissant/29021-7-croissant-transparent-background.png">
<img id="espresso" src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/eae8653c-e809-4e35-ac17-d9866ba92b26/icon/e684d982-4aa3-48fb-8e2e-08d53e5096b6">
<div>
<img id="instagram1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">
<p id="bakery"> @red.bakery </p>
</br>
</br>
<img id="instagram2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">
<p id="cafe"> @red.cafe </p>
</div>
ANSWER
Answered 2021-Jun-15 at 01:41In details:
Muhammad Zaib has the answer, and there is a demo:
body {
margin: 0px;
background-image: url('https://c8.alamy.com/comp/2BT68F1/vector-black-chalkboard-style-hand-drawn-bakery-horizontal-border-pattern-suitable-for-bread-packaging-cafe-menu-design-and-wallpaper-2BT68F1.jpg');
background-size: cover;
}
#img1 {
background-repeat: no-repeat;
width: 100%;
height: 40%;
}
#instagram1 {
width: 20px;
height: 20px;
float: left;
}
#instagram2 {
width: 20px;
height: 20px;
position: relative;
right: 168px;
top: 5px;
}
#bakery {
color: black;
float: left;
position: relative;
bottom: 15px;
left: 5px;
}
#cafe {
color: black;
float: left;
position: relative;
right: 75px;
bottom: 10px;
}
div {
width: 200px;
height: 60px;
float: right;
position: relative;
top: 550px;
background-color: #b3d9ff;
}
#croissant-wrapper {
width: 200px;
height: 100px;
position: relative;
left: 1100px;
top: 250px;
}
#croissant {
width: 200px;
height: 100px;
position: absolute;
}
#croissant:hover {
width: 250px;
height: 150px;
}
#espresso {
position: relative;
top: 280px;
width: 200px;
height: 150px;
}
<span id="croissant-wrapper">
<img id="croissant" src="https://freepngimg.com/thumb/croissant/29021-7-croissant-transparent-background.png">
</span>
<img id="espresso" src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/eae8653c-e809-4e35-ac17-d9866ba92b26/icon/e684d982-4aa3-48fb-8e2e-08d53e5096b6">
<div>
<img id="instagram1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">
<p id="bakery"> @red.bakery </p>
<br/>
<br/>
<img id="instagram2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">
<p id="cafe"> @red.cafe </p>
</div>
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
Save this library and start creating your kit
Open Weaver – Develop Applications Faster with Open Source