• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Change image on hover and expand with more info

Change image on hover and expand with more info 1 year 6 months ago #40056

Hi

I have a client, who wants a setup with a grid like this a.cl.ly/OAurpXX9. When hover on an item, then the image should change to a color-image instead of b/w, and when clicking one item, then it should expand with 3-5 lines of text and a button right below the item clicked.

Suggestions on how to solve this?

Thanks!
The administrator has disabled public write access.

Change image on hover and expand with more info 1 year 3 months ago #40303

  • dragos
  • dragos's Avatar
  • OFFLINE
  • Platinum Boarder
  • Posts: 371
  • Thank you received: 67
Hello,

You can further adjust the component using custom CSS definitions, for example, you can try setting up a Portfolio filtering element in RSPageBuilder!, add your items and for each of these, hide the Title and add your desired URL within the Item Content area. Next, use some CSS rules to adjust how these are displayed, for example:
/* this will change the image color from black&white to coloured */ 
.rspbld-portfolio-filtering-container .filtr-item img {
    filter: grayscale(100%);
    transition: .5s linear;
}
 
/* the following will hide the initial item content area and display it upon hovering the element image */ 
.rspbld-portfolio-filtering-container .rspbld-content {
	background-color: #fff;
	padding: 35px;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 90%;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.75);
	opacity: 0;
	filter: alpha(opacity=0);
	transform: translate(-50%, -50%) scale(.9, .9);
	transition: transform .2s linear 0s;
}
 
.rspbld-portfolio-filtering-container .rspbld-content:hover {
	-moz-opacity: 1;
	opacity: 1;
	color:red;
	filter: alpha(opacity=100);
	transform: translate(-50%, -50%) scale(1, 1);
}
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!