Joomla Templates Club 406,261 posts

[philip_nav Friend philip_navJoin date: September 2014Posts: 106Downloads:239Uploads:23 Thanks: 6 Thanked: 8 times in 1 posts]

#204863

have any body come through this Issue, as I add position1 ,position 2, position 3 and add me own png image, the text hove over the image and the image do not disappear as in the joomlart demo. here is the custom html for each content as follow:

<div class=”ja-special-content”>

<div><img src=”images/livingbox/article/fitting/installtion-1.png”></div>
<h4><a href=”#”>Installation </a></h4>
<p>All our professional fitting teams are iKBBi registered and include plumbers, electricians and gas engineers. You can rest assured that your project is in capable and qualified hands and will be completed to the highest standard.</p>
<p>We continue to provide support after the installation is complete</p>
<p>Our work is finished only when you are satisfied</p>
<p>All installations come with a 1 year guarantee</p>
<a class=”btn btn-link” href=”#”>Read more</a>

unfortunately I am working locally on the project so I will not be able to give access if you request
any help will be appreciated

and the screen shot

---

Attachments:

1. 
2. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#563940

this is the actual code

<div class="ja-special-content">
<div class="circle-icon background-1"><i class="fa fa-desktop"></i></div>
<h4><a href="/blog/news-updates/vote-for-sotm-september">Web design</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid dunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-link" href="/blog/news-updates/vote-for-sotm-september">Read more</a>
</div>

Replace your image Div

<div><img src="images/livingbox/article/fitting/installtion-1.png"></div>

with

<div class="background-1"><img src="images/livingbox/article/fitting/installtion-1.png"></div>

[philip_nav Friend philip_navJoin date: September 2014Posts: 106Downloads:239Uploads:23 Thanks: 6 Thanked: 8 times in 1 posts]

#563947

thank you Chavan ro quick answer, but the problem is the image does not get hide, and the text slide over the image, in th demo the image disappear with the image scroll up

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#563948

Replace this code

<div class="circle-icon "><img src="images/livingbox/article/fitting/installtion-1.png"></div>

[philip_nav Friend philip_navJoin date: September 2014Posts: 106Downloads:239Uploads:23 Thanks: 6 Thanked: 8 times in 1 posts]

#563950

I have change the code to:
<div class=”circle-icon “><img src=”images/livingbox/article/fitting/installtion-1.png”></div>
but look at the attachment blow

also the size of the installtion-1.png is 200 x 200 to match the icon size

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#563953

this is the fix, you must help me by uploading it to some server and provide me the details to check.

please help me to help you.

[philip_nav Friend philip_navJoin date: September 2014Posts: 106Downloads:239Uploads:23 Thanks: 6 Thanked: 8 times in 1 posts]

#563955

Hi Chavan, thank you for trying to help. I have find the solutions by add custom CSS as follow

.circle-icon {

• border-radius: 200px;
• display: inline-block;
• height: 200px;
• text-align: center;
• line-height: 200px;
• margin: 0 0 24px;
• overflow: hidden;
• width: 200px;
• zoom: 1;
• -webkit-transition: 0.3s;

-o-transition: 0.3s;

• transition: 0.3s;

}

[philip_nav Friend philip_navJoin date: September 2014Posts: 106Downloads:239Uploads:23 Thanks: 6 Thanked: 8 times in 1 posts]

#563965

Hi Chavan

I am working local on my computer and would love to uploaded to the server but not in the current state, solving one problem, find another, what will be your ideal solutions for the screen shot blow

here is what I have in the custom CSS:

.ja-ss-wrap {
width: 100%;
}
.ja-slideshow {
padding: 0 0 0 0;
width: 100% !important;
height: 640px !important;

}
.ja-ss-desc .btn {
/* margin-top: 24px; */
position: absolute;
left: 1400.672px;
top: 35.324px;
}
.logo .logo-image img {
width: 100%;
}
.footer-left > h2 {
display: none;
}
.poweredby .t3-logo, .poweredby .t3-logo-small {
display: none;
}
/* Core Services; */
.t3-sl {
padding-bottom: 30px;
padding-top: 30px;
}
.circle-icon {
border-radius: 200px;
display: inline-block;
height: 200px;
text-align: center;
line-height: 200px;
margin: 0 0 24px;
overflow: hidden;
width: 200px;
zoom: 1;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}

/* navhelper */
.container {
width: 100%;
}

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#564187

Glad, its fixed. Please post if there is any fixes around. but please post your site to demo server.

[Author]

Posts