add "circles" to other pages

Nobody has tackled that one (yet). The exception is the blog page which also contains the zooming circles.

It can all be achieved with code & css styling, but I’ve not seen a solution.

So no hope at all ?

I sent a message to Nic to ask him to comment.

I did that, but was a nasty hack..

Ah, if you want I can post my solution, but don’t know if this could disturb Nic.

I have added done this on my page https://www.duplex-pump.com/products but I still have a major problem. When I hover over one circle they all expand. I don’t know why this is happening.

However, the basic html is as follows:

<div class="widget-front">
<div class="thumb-wrapper">
  <a href="" title=""></a>
  <img width="" height="" src="" class="attachment-tc-thumb wp-post-image" alt=""></div>
<h3>Image title here</h3>
<p class="fp-text-one">description here</p>
<a href="button link here" title="Gardner Denver">See All ?</a>
          </div><!-- /.widget-front -->

Since I have five buttons I used the bootstrap framework with div class of span4 for the top three and span6 for the bottom two

Add this to your custom css

article.hover .round-div{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}

and, goodnight ??

That will keep you circles from transforming but I myself would like them to expand. Just not all at once.
I appreciate the thought though and may wind up doing that if I can’t make the circles blow up independently.

Let me think about this

here is a start: but you will have to tweak the code a take it a step further, you will also have to edit the details in the code like the image url and labels, paste this into your page text editor and see if you can get it working correctly.

change and cusomize the css and add a new css to like ‘container marketing1’

`<div class=”container marketing”>

<div class=”row widget-area” role=”complementary”><div class=”span4 fp-one”>
<div class=”widget-front”>
<div class=”thumb-wrapper “><a class=”round-div” href=”https://demo.themesandco.com/style-your-website-live/&#8221; title=”Style your website live!”></a><img width=”270″ height=”250″ src=”https://eebfa6e5d2c5429094d6-4131c45348359b05377a52f08bbf10dc.r88.cf1.rackcdn.com/wp-content/uploads/2013/05/wand1.png&#8221; class=”attachment-medium wp-post-image” alt=”wand” /></div><h2>Style your website live!</h2><p class=”fp-text-one”> </p><a class=”btn btn-primary fp-button” href=”https://demo.themesandco.com/style-your-website-live/&#8221; title=”Style your website live!”>Learn more ?</a>
</div><!– /.widget-front –>

</div><div class=”span4 fp-two”>
<div class=”widget-front”>
<div class=”thumb-wrapper “><a class=”round-div” href=”https://demo.themesandco.com/add-sliders-to-any-pagepost/&#8221; title=”Add sliders to any post”></a><img width=”270″ height=”250″ src=”https://eebfa6e5d2c5429094d6-4131c45348359b05377a52f08bbf10dc.r88.cf1.rackcdn.com/wp-content/uploads/2013/05/plus1.png&#8221; class=”attachment-medium wp-post-image” alt=”plus” /></div><h2>Add sliders to any post</h2><p class=”fp-text-two”> </p><a class=”btn btn-primary fp-button” href=”https://demo.themesandco.com/add-sliders-to-any-pagepost/&#8221; title=”Add sliders to any post”>Learn more ?</a>
</div><!– /.widget-front –>

</div><div class=”span4 fp-three”>
<div class=”widget-front”>
<div class=”thumb-wrapper “><a class=”round-div” href=”https://demo.themesandco.com/full-html5css3/&#8221; title=”Full HTML5/CSS3″></a><img width=”270″ height=”250″ src=”https://eebfa6e5d2c5429094d6-4131c45348359b05377a52f08bbf10dc.r88.cf1.rackcdn.com/wp-content/uploads/2013/05/html52.png&#8221; class=”attachment-medium wp-post-image” alt=”html5″ /></div><h2>Full HTML5/CSS3</h2><p class=”fp-text-three”>

</p><a class=”btn btn-primary fp-button” href=”https://demo.themesandco.com/full-html5css3/&#8221; title=”Full HTML5/CSS3″>Learn more ?</a>
</div><!– /.widget-front –>

</div></div>
</div><!– .container –>`

okay I just got!
to keep all the bubbles from expanding at the same time just look at this line:

<div class=”row widget-area” role=”complementary”><div class=”span4 fp-one”>

NOW add the number 1 in from of the word one like so

<div class=”row widget-area” role=”complementary”><div class=”span4 fp-one1″>

and there you have it! baby boom and elvis has left the building!

The above codes with the formula I just gave works perfectly I justed tested it so let me know how it goes

Now here is the final version of the code just paste into your text editor and edit the images and links at will

<div class="container marketing">

<div class="row widget-area" role="complementary"><div class="span4 fp-one1">
<div class="widget-front">
<div class="thumb-wrapper "><a class="round-div" href="https://demo.themesandco.com/style-your-website-live/" title="Style your website live!"></a><img width="270" height="250" src="https://eebfa6e5d2c5429094d6-4131c45348359b05377a52f08bbf10dc.r88.cf1.rackcdn.com/wp-content/uploads/2013/05/wand1.png" class="attachment-medium wp-post-image" alt="wand" /></div><h2>Style your website live!</h2><p class="fp-text-one"> </p><a class="btn btn-primary fp-button" href="https://demo.themesandco.com/style-your-website-live/" title="Style your website live!">Learn more ?</a>
</div><!-- /.widget-front -->

</div><div class="span4 fp-two">
<div class="widget-front">
<div class="thumb-wrapper "><a class="round-div" href="https://demo.themesandco.com/add-sliders-to-any-pagepost/" title="Add sliders to any post"></a><img width="270" height="250" src="https://eebfa6e5d2c5429094d6-4131c45348359b05377a52f08bbf10dc.r88.cf1.rackcdn.com/wp-content/uploads/2013/05/plus1.png" class="attachment-medium wp-post-image" alt="plus" /></div><h2>Add sliders to any post</h2><p class="fp-text-two"> </p><a class="btn btn-primary fp-button" href="https://demo.themesandco.com/add-sliders-to-any-pagepost/" title="Add sliders to any post">Learn more ?</a>
</div><!-- /.widget-front -->

</div><div class="span4 fp-three">
<div class="widget-front">
<div class="thumb-wrapper "><a class="round-div" href="https://demo.themesandco.com/full-html5css3/" title="Full HTML5/CSS3"></a><img width="270" height="250" src="https://eebfa6e5d2c5429094d6-4131c45348359b05377a52f08bbf10dc.r88.cf1.rackcdn.com/wp-content/uploads/2013/05/html52.png" class="attachment-medium wp-post-image" alt="html5" /></div><h2>Full HTML5/CSS3</h2><p class="fp-text-three">

</p><a class="btn btn-primary fp-button" href="https://demo.themesandco.com/full-html5css3/" title="Full HTML5/CSS3">Learn more ?</a>
</div><!-- /.widget-front -->

</div></div>
</div><!-- .container -->

I take it back. I was absolutely wrong and you were right. I had tried that same code before but I forgot to remove some previous css so it did work right.

Thanks everybody!

Thanks Michael. Still not heard from Nic, but will use this post until we produce a snippet or core fix.