Joomla Templates Club 406,261 posts

[pjcsantos Friend pjcsantosJoin date: December 2012Posts: 34Downloads:0Uploads:0 Thanks: 9]

#186904

I’m using the Modern style and I would like to have the photos changing to color when you mouse over them. Is it possible?

[pjcsantos Friend pjcsantosJoin date: December 2012Posts: 34Downloads:0Uploads:0 Thanks: 9]

#490354

I tried this:

<div class="mask-inner"><img class="img-grayscale" src="images/joomlart/demo/sam-1.jpg" border="0" alt="Sample image" /></div>

But it isn’t working

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#490442

Hi pjcsantos,

I have included the Team section back-end of our JA Onepage demo. You can compare & apply into your HTML module configuration.

<div class="introduction">Consectetur adipiscing elit. Donec pellentesque venenatis elit, quis aliquet mauris malesuada vel. Donec vitae libero dolor, eget dapibus justo. Aenean facilisis aliquet feugiat. Suspendisse lacinia congue est ac semper. Nulla ut elit magna, vitae volutpat magna. Vivamus eu erat lectus est ac semper.</div>
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask"> </div>
<div class="mask-inner"><img class="img-grayscale" src="images/joomlart/demo/sam-1.jpg" border="0" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>John Doe</h3>
<p class="meta">Creative designer</p>
<p><strong>Laoreet vestibulum</strong> cursus elit fringilla pretium Sed ut sodales quis pretium. Lorem vestibulum orci in commodo vestibm est ac semper.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask"> </div>
<div class="mask-inner"><img class="img-grayscale" src="images/joomlart/demo/sam-2.jpg" border="0" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>Jonnathan Orgen</h3>
<p class="meta">Video Specialist</p>
<p>Suspendisse et vivamus accumsan <a href="#" title="Sample link">phasellus auctor</a> nisl mauris facilisi aliquam et. Justo enim justo curabitured senectus donec pretium.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask"> </div>
<div class="mask-inner"><img class="img-grayscale" src="images/joomlart/demo/sam-3.jpg" border="0" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>Michael Smith</h3>
<p class="meta">Graphic designer</p>
<p>Fringilla non adipiscing magna ligula quam Vestibulum Donec est Quisque tellus. Convallis enim ante eros eros In lorem ipsum purus.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask hiring">
<div class="mask"> </div>
<div class="mask-inner hiring"><img class="img-grayscale" src="images/joomlart/demo/sam_blank.png" border="0" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>We are Hiring!</h3>
<p class="meta">CSS guru</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec elit non mi porta gravida at eget metus. Nullam nibh ultricies <a href="#" title="Sample link">vehicula elit</a>.</p>
</div>
</div>
</li>
</ul>

* The red lines are the codes for one team-member profile. If your concern still remains, send me PM with your admin login for checking it.

Regards,
—
Leo

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#490516

Hi pjcsantos,

I did check the Team section on your website, it seems that the missing colored images (no opacity) is caused by your modified source codes. There are some missing css classes which detect the opacity when mouse hovers, that is why you can not see colored images. So, you should follow our HTML format above for Team section with your own texts and images only.

Regards,
—
Leo

---

Attachments:

1. 

[pjcsantos Friend pjcsantosJoin date: December 2012Posts: 34Downloads:0Uploads:0 Thanks: 9]

#490530

PM Sent 😉

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#490675

Hi pjcsantos,

I did give my explanation in my recent reply above. Can you check it again ?

Regards.
—
Leo

[pjcsantos Friend pjcsantosJoin date: December 2012Posts: 34Downloads:0Uploads:0 Thanks: 9]

#490689

How can I add those missiing css codes?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#490828

Hi pjcsantos,

Well, I’ll help. But I need more times to fix your issue, can you wait for it ?

Regards,
—
Leo

[pjcsantos Friend pjcsantosJoin date: December 2012Posts: 34Downloads:0Uploads:0 Thanks: 9]

#490856

Sure let me know when you can fix it 😉

[pjcsantos Friend pjcsantosJoin date: December 2012Posts: 34Downloads:0Uploads:0 Thanks: 9]

#491070

So any update on my issue?

[pjcsantos Friend pjcsantosJoin date: December 2012Posts: 34Downloads:0Uploads:0 Thanks: 9]

#491197

This is how the team module looks like:

<div class="introduction">Consectetur adipiscing elit. Donec pellentesque venenatis elit, quis aliquet mauris malesuada vel. Donec vitae libero dolor, eget dapibus justo. Aenean facilisis aliquet feugiat. Suspendisse lacinia congue est ac semper. Nulla ut elit magna, vitae volutpat magna. Vivamus eu erat lectus est ac semper.</div>
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask">*</div>
<div class="mask-inner"><img class="img-grayscale" src="images/diogo.png" border="0" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>John Doe</h3>
<p class="meta">Creative designer</p>
<p><strong>Laoreet vestibulum</strong> cursus elit fringilla pretium Sed ut sodales quis pretium. Lorem vestibulum orci in commodo vestibm est ac semper.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask">*</div>
<div class="mask-inner"><img class="img-grayscale" src="images/diogo.png" border="0" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>Diogo Mendes</h3>
<p class="meta">Vice Presidente</p>
<p>Suspendisse et vivamus accumsan <a href="#" title="Sample link">phasellus auctor</a> nisl mauris facilisi aliquam et. Justo enim justo curabitured senectus donec pretium.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask">*</div>
<div class="mask-inner"><img class="img-grayscale" src="images/rita.png" border="0" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>Rita Magalhães</h3>
<p class="meta">Vice Presidente</p>
<p>Fringilla non adipiscing magna ligula quam Vestibulum Donec est Quisque tellus. Convallis enim ante eros eros In lorem ipsum purus.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask hiring">
<div class="mask">*</div>
<div class="mask-inner hiring"><img class="img-grayscale" src="images/joomlart/demo/sam_blank.png" border="0" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>We are Hiring!</h3>
<p class="meta">CSS guru</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec elit non mi porta gravida at eget metus. Nullam nibh ultricies <a href="#" title="Sample link">vehicula elit</a>.</p>
</div>
</div>
</li>
</ul>

You will notice that I have those missing css classes in the code above. However the problem persists.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#491297

Hi,

I’m really sorry for my late response, currently is working on your issue. At this time, I’m quitely busy with other customizion issues, so I didn’t have time to check out your opacity issue, hope that I can solve it soon for you.

Leo

[pjcsantos Friend pjcsantosJoin date: December 2012Posts: 34Downloads:0Uploads:0 Thanks: 9]

#491489

So Leo any update on this so far?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#492089

Hi,

I fixed your issue. Here is what i added in custom.css file

div.thumb-mask .mask {
display: none !important;
}

Leo

[Author]

Posts