Skip Navigation

[Resolved] How to place text over images in slider

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 replies, has 2 voices.

Last updated by arnoldd 7 years, 4 months ago.

Author
Posts
#200508

I'm creating a slider in Views and I can get the images to display, but the text I want on the image is appearing underneath instead.
Can anyone tell me what I'm doing wrong?

Following is the code I'm using, first of all the relevant lines of the view:

<wpv-loop>
          [wpv-post-body view_template="PageImageShow - slide"]
</wpv-loop>

Now the view template:

<div class="slidimage">
  [wpv-post-featured-image size="slider-image"]
  <span class="slider-textbox">
    [types field="side-heading"][/types]
  	[types field="side-text"][/types]
  </span>  
</div>

And now the CSS:

.slidimage{
  	position:relative;
 	width:100%;
}

.slider-textbox{
 	display:block;
  	position:absolute;
  	background-color:#FFFFF;
  	opacity:80%;
  	width:30%;
        float:right;
}

Thank you...

#200599

Hi again. OK I have rectified this... and it was me and my code which was the error (as I thought) and nothing to do with the Slider version of a View.

In case anyone is interested, it was down to the div compartments I was using, and in not grouping the elements properly. So following is the correct code:

First of all the view template:

<div class="slidholder">
  <div class="slidimage">
    [wpv-post-featured-image size="slider-image"]
    <div class="slider-textbox">
      <div class="slider-head">
      	[types field="side-heading"][/types]
      </div>
      <div class="slider-text">
      	[types field="side-text"][/types]
      </div>
      <div class="readmore">
        <A HREF="[wpv-post-url]">Read More</A>
      </div>
    </div>  
    
  </div>
</div>

And now the CSS:

.slidholder{
  display:block;
  position:relative;
  width:100%;
}

.slidimage{
  	position:relative;
 	width:100%;
  	top:0;
}

.slider-textbox{
  	display:block;
  	position:absolute;
  	background-color:#000;
  	opacity:0.5;
  	margin:0% 0% 0% 70%;
  	width:30%;
  	height:100%;
    float:right;
  	top:0;
  	border:0px;
}
.slider-head{
  	margin:6px 6px 0px 0px;
  	display:block;
  	font-size: 160%;
    text-transform:uppercase;
  	line-height:95%;
  	font-weight:bold;
  	float:right;
  	text-align:right;
  	color:white;
  	
}
.slider-text{
	text-align:right;
  	margin:0px 6px 0px 0px;
  	color:white;
}

.readmore{
  	text-align:right;
  	font-weight:bold;
  	color:#0056a5;
  	text-transform:uppercase;
    margin:0px 6px 0px 0px;
}
#233175

Thanks for te code! Helped me alot.