Full width portfolio & title overlay grid of 4 but with a margin?

14 replies · opened Jun 27, 2017

MmooondogJun 27, 2017

Hi
Can this be done...?

SSemicolon WebSTAFFJun 28, 2017

Hello,

Surprisingly Yes! :) And only by adding the following lines of CSS Code:

.portfolio.portfolio-full,
.portfolio-full .portfolio-item { padding: 5px !important; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

MmooondogJul 5, 2017

Many thanks team :)

Could you also let me know how to make whole image clickable when mouseover in portfolio section. There is an a href around the image but when you hover mouseover it doesn't respond. The <h3> and <span> and the icon mouse-over works, but not the whole area.
eg:
<article class="portfolio-item pf-media pf-icons">
<div class="portfolio-image">
[

						](portfolio-single.html)
						&lt;div class="portfolio-overlay"&gt;
							&lt;div class="portfolio-desc"&gt;
								&lt;h3&gt;[Open Imagination](portfolio-single.html)&lt;/h3&gt;
								&lt;span&gt;[Media](#), [Icons](#)&lt;/span&gt;
							&lt;/div&gt;
							[](images/portfolio/full/1.jpg)
							[](portfolio-single.html)
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/article&gt;

Is this possible?

cheers

MmooondogJul 11, 2017

Many thanks team ?

Could you also let me know how to make whole image clickable when mouseover in portfolio section. There is an a href around the image but when you hover mouseover it doesn’t respond. The <h3> and <span> and the icon mouse-over works, but not the whole area.
eg:
<article class="col-md-3 portfolio-item pf-media pf-icons">
<div class="portfolio-image">
[

						](portfolio-single.html)
						&lt;div class="portfolio-overlay"&gt;
							[](images/portfolio/full/1.jpg)
							[](portfolio-single.html)
						&lt;/div&gt;
					&lt;/div&gt;
					&lt;div class="portfolio-desc"&gt;
						&lt;h3&gt;[Open Imagination](portfolio-single.html)&lt;/h3&gt;
						&lt;span&gt;[Media](#), [Icons](#)&lt;/span&gt;
					&lt;/div&gt;
				&lt;/article&gt;

Is this possible?

cheers

MmooondogJul 12, 2017

Hello

Could I have a reply please to my question July 5th.

I would like to know whether it is possible to make the whole portfolio image area have a mouse over hover state. The default seems only to have mouse over on the icon and title overlay.

Especially... 4 column with margin title overlay Ajax in page:-

<section id="content">

		&lt;div class="content-wrap"&gt;

			&lt;div class="container clearfix"&gt;
			
			&lt;div id="portfolio-ajax-wrap"&gt;
					&lt;div id="portfolio-ajax-container"&gt;&lt;/div&gt;
				&lt;/div&gt;

				&lt;div id="portfolio-ajax-loader"&gt;

</div>

				&lt;!-- Portfolio Items
				============================================= --&gt;
				&lt;div id="portfolio" class="portfolio grid-container portfolio-ajax clearfix"&gt;

					&lt;article id="portfolio-item-1" data-loader="include/ajax/portfolio-ajax-image.php" class="portfolio-item"&gt;
					
						&lt;div class="portfolio-image"&gt;
							[

							](portfolio-single.html)
							&lt;div class="portfolio-overlay"&gt;
								&lt;div class="portfolio-desc"&gt;
									&lt;h3&gt;[Open Imagination](#)&lt;/h3&gt;
								&lt;/div&gt;
								
								[](#)
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/article&gt;

						&lt;article id="portfolio-item-2" data-loader="include/ajax/portfolio-ajax-image.php" class="portfolio-item"&gt;
						&lt;div class="portfolio-image"&gt;
							[

							](portfolio-single.html)
							&lt;div class="portfolio-overlay"&gt;
								&lt;div class="portfolio-desc"&gt;
									&lt;h3&gt;[Open Imagination](#)&lt;/h3&gt;
								&lt;/div&gt;
								
								[](#)
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/article&gt;

					&lt;article id="portfolio-item-3" data-loader="include/ajax/portfolio-ajax-image.php" class="portfolio-item"&gt;
						&lt;div class="portfolio-image"&gt;
							[

							](portfolio-single.html)
							&lt;div class="portfolio-overlay"&gt;
								&lt;div class="portfolio-desc"&gt;
									&lt;h3&gt;[Open Imagination](#)&lt;/h3&gt;
								&lt;/div&gt;
								
								[](#)
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/article&gt;

					&lt;article id="portfolio-item-4" data-loader="include/ajax/portfolio-ajax-image.php" class="portfolio-item"&gt;
						&lt;div class="portfolio-image"&gt;
							[

							](portfolio-single.html)
							&lt;div class="portfolio-overlay"&gt;
								&lt;div class="portfolio-desc"&gt;
									&lt;h3&gt;[Open Imagination](#)&lt;/h3&gt;
								&lt;/div&gt;
								
								[](#)
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/article&gt;

					

				&lt;/div&gt;&lt;!-- #portfolio end --&gt;

			&lt;/div&gt;

		&lt;/div&gt;

	&lt;/section&gt;&lt;!-- #content end --&gt;

MmooondogJul 14, 2017

Hi
Could I have a reply please to my question July 11th.

and also could you let me know how to make the whole image clickable when mouseover in portfolio section. There is an a href around the image but when you hover mouseover it doesn’t respond. The <h3> and <span> and the icon mouse-over works, but not the whole area.

The default seems only to have mouse over on the icon and title overlay.

Specifically … 4 column with margin title overlay Ajax in page:-

<!– Content
============================================= –>
<section id=”content”>

<div id=”portfolio-ajax-loader”>Preloader</div>

<!– Portfolio Items
============================================= –>
<div id=”portfolio” class=”portfolio grid-container portfolio-ajax clearfix”>

Open Imagination

<div class=”portfolio-overlay”>
<div class=”portfolio-desc”>
<h3>Open Imagination</h3>
</div>

Open Imagination

<div class=”portfolio-overlay”>
<div class=”portfolio-desc”>
<h3>Open Imagination</h3>
</div>

Open Imagination

<div class=”portfolio-overlay”>
<div class=”portfolio-desc”>
<h3>Open Imagination</h3>
</div>

Open Imagination

<div class=”portfolio-overlay”>
<div class=”portfolio-desc”>
<h3>Open Imagination</h3>
</div>

</div><!– #portfolio end –>

</div>

</section><!– #content end –>

Is this possible?

cheers

MmooondogJul 15, 2017

I notice that many other topics have been answered within hours, but mine seem to have slipped the net!

Would appreciate a reply please.

Mouse over hover link on portfolio images?
5th & 11th July

Thanks

MmooondogJul 17, 2017

I have asked this question before but have not had a reply so here it is again.
How to make the whole image clickable when mouseover in portfolio section. There is an a href around the image but when you hover/mouse over the image it doesn’t respond. The <h3> and <span> and the icon mouse-over works, but not the whole area.

The default seems only to have mouse over on the icon and title overlay.

Specifically … 4 column with margin title overlay Ajax in page:-

<!– Content
============================================= –>
<section id=”content”>

<div id=”portfolio-ajax-loader”>Preloader</div>

<!– Portfolio Items
============================================= –>
<div id=”portfolio” class=”portfolio grid-container portfolio-ajax clearfix”>

Open Imagination

<div class=”portfolio-overlay”>
<div class=”portfolio-desc”>
<h3>Open Imagination</h3>
</div>

SSemicolon WebSTAFFJul 18, 2017

Hello,

Thank You so much for your Patience! Please consider using the following code:


	
		[
			
![attachment](images/portfolio/4/1.jpg)

		](portfolio-single.html)
		
			[](images/portfolio/full/1.jpg)
			[](portfolio-single.html)
		
		[]({your-link-here})
	
	
		[Open Imagination](portfolio-single.html)
		[Media](#), [Icons](#)

Simply find {your-link-here} and change it to your desired link.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

MmooondogJul 18, 2017

Hi
Unfortunately this doesn't work - it's not quite what I asked for.

Please look at the example image attached above from my last request JULY 17, 2017 for reference. I need the H3 title & Icon centred overlaying the image and as you mouse / hover over the image the hand link appears, the image overlay goes grey and the whole item links to the appropriate page.

As I said before the default seems only to have mouse over and link on the icon and title overlay not on the image.

In this case it needs to work for a 4 column grid portfolio with margin, title overlay with Ajax in page:-

would appreciate your earliest help.

thanks

SSemicolon WebSTAFFJul 22, 2017

Hello,

Really Apologize about the Inconveniences! Actually we just noticed that some of our Codes were formatted by the Editor which is why the codes we provided above did not work for you. Please consider using the following code:


	
		[
			
![attachment](images/portfolio/4/1.jpg)

		](portfolio-single.html)
		
			
				[Open Imagination](portfolio-single.html)
				[Media](#), [Icons](#)
			
			[](images/portfolio/full/1.jpg)
			[](portfolio-single.html)
		
		[]({your-link-here})

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

MmooondogJul 24, 2017

Hi
Thanks. The mouse over image works fine but doesn't work for portfolio-ajax-in-modal.html

As I've said before in previous requests

I need it to work for a 4 column grid portfolio with margin, title overlay with Ajax in page:

Clicking on the link does not open the Ajax Slider in the page

Please can you get back to me urgently as this request has been going on since July 5th

Thank You

SSemicolon WebSTAFFJul 24, 2017

Hello,

We Really Apologize about the Inconveniences caused and misunderstandings! Please consider using the following code:


	
		[
			
![attachment](images/portfolio/4/1.jpg)

		](portfolio-single.html)
		
			[](#)
		
		[](#)
	
	
		[Open Imagination](portfolio-single.html)
		[Media](#), [Icons](#)

and then find the following code in the js/functions.js File:

$('.portfolio-ajax .portfolio-item a.center-icon').click

and replace it with:

$('.portfolio-ajax .portfolio-item .portfolio-ajax-trigger').click

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

MmooondogJul 27, 2017

Guy's
At last. Excellent, many thanks for your help in sorting the problem out.
M

SSemicolon WebSTAFFJul 28, 2017

Hello,

Really Glad that your issues were resolved. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard