mac13
posted this
20 June 2019
I can't seem to find the settings or properties that allow me to create a hover state on an image. I also don't seem to be able to do this with text too. Is it just me who can't find this feature or have the developers actually left out this most basic of all features of web design?
Hello Alan,
You can do it by CSS3. Just follow the next steps. (Tested on Nicepage Desktop App V1.9.5 and in an exported HTML site)
1.- Copy the two changing images that you want to publish in the "images" folder of you Nicepage Desktop project (Site_xxxxxxxx)
2.- Open your Nicepage project
3.- In an empty block where you want to publish your changing images, click on "ADD", then "MORE CONTROLS" and finaly " HTML".
The system displays an area with "Sample HTML. Lorem ipsum dolor sit amet..." and in the right system column the window with the HTML code.
Insert the next html code:
<div class="your_created_class">
<img src="np://user.desktop.nicepage.com/Site_xxxxxxxx/images/your_firts_image.png" />
<img class="top" src="np://user.desktop.nicepage.com/Site_xxxxxx/images/your_hover_image.jpg" />
</div>
The system preview window will display both images one over the other. Don't worry it will not appear like this.
4.- In the same right system column, click on "Edit CSS" and copy the next code:
.your_created_class {
position: relative;
height: auto; /* or SET the height that you want */
width: auto; /* or SET the width that you want */
margin: auto; /* or SET the margin that you want */
float: left;
}
.your_created_class img {
position: absolute;
left: 0;
transition: opacity 1.5s ease-in-out; /* SET how fast you want the transition */
}
.your_created_class img.top:hover {
opacity: 0;
}
5.- Click on "DONE" button
6.- Assign the created class to your div by typing the name without "." in the CSS class right block (your_created_class)
7.- Thats it.
8.- You can hide the block on Mobile
Hope it will help you
> I can't seem to find the settings or properties that allow me to create a hover state on an image. I also don't seem to be able to do this with text too. Is it just me who can't find this feature or have the developers actually left out this most basic of all features of web design?
Hello Alan,
You can do it by CSS3. Just follow the next steps. (Tested on Nicepage Desktop App V1.9.5 and in an exported HTML site)
1.- Copy the two changing images that you want to publish in the "images" folder of you Nicepage Desktop project (Site_xxxxxxxx)
2.- Open your Nicepage project
3.- In an empty block where you want to publish your changing images, click on "ADD", then "MORE CONTROLS" and finaly " HTML".
The system displays an area with "Sample HTML. Lorem ipsum dolor sit amet..." and in the right system column the window with the HTML code.
Insert the next html code:
<div class="your_created_class">
<img src="np://user.desktop.nicepage.com/Site_xxxxxxxx/images/your_firts_image.png" />
<img class="top" src="np://user.desktop.nicepage.com/Site_xxxxxx/images/your_hover_image.jpg" />
</div>
The system preview window will display both images one over the other. Don't worry it will not appear like this.
4.- In the same right system column, click on "Edit CSS" and copy the next code:
.your_created_class {
position: relative;
height: auto; /* or SET the height that you want */
width: auto; /* or SET the width that you want */
margin: auto; /* or SET the margin that you want */
float: left;
}
.your_created_class img {
position: absolute;
left: 0;
transition: opacity 1.5s ease-in-out; /* SET how fast you want the transition */
}
.your_created_class img.top:hover {
opacity: 0;
}
5.- Click on "DONE" button
6.- Assign the created class to your div by typing the name without "." in the CSS class right block (your_created_class)
7.- Thats it.
8.- You can hide the block on Mobile
Hope it will help you
